vue3.0对比2.X有哪些变化

1.composition-api（https://composition-api.vuejs.org/）

a、更好的逻辑复用与代码组织

可以通过组合逻辑代码函数取代option式的组合代码
option式组件组合的业务逻辑分散在组件中的各处，需要先关注data,methods,computed,分散在各处的代码。（下图是官网中对比composition 和 options 组织代码的对比，可以看出composition API 将每个逻辑关注点的代码现在都被组合进了一个组合函数，大大减少了在组件中的代码来回跳转）
可以看出composition API 可以组织和抽取大部分的工具代码，来做代码复用，而不再像option式组件担心多个Mixin之间的数据污染。

两种代码组织方式的对比.png

例子

例一常用状态复用

import { ref } from 'vue'

const useToggle = (initStatus = false) => {
    const on = ref(initStatus)
    const toggle = value => {
        on.value = value
    }
    return { on , toggle}
}

例二 model层逻辑复用

import { ref, onMounted } from 'vue'

const useSomeData = (data) => {
    const res = ref([])

    onMounted(async () => {
        this.res = await api.getSomeData(data)
    })

    return { res }
}

等等

b、更好的类型推导

在option式组件中，通过this上下文取当前组件实例属性的数据和方法，导致类型推导难以追踪

2.更好的tree-shaking

导出两个工具函数.png

只使用到其中一个.png

打包后会都打包进去.png

通过开启 webpack 配置中 usedExports: true 和 minimize: true，
清楚掉没有使用过的工具函数引用和代码

优化后.png

3.webpack打包的配置

vue-loader 依赖 "vue-template-compiler" 3.0 改为 @vue/compiler-sfc
需要在plugins里配置 VueLoaderPlugin

4 vue-cli的支持

目前通过 vue-cli-plugin-vue-next 升级到vue3.0beta版
vue add vue-cli-plugin-vue-next

升级后.png

5 几个周边库的支持

    "vue-router": "4.0.0-alpha.7",
    "vuex": "4.0.0-alpha.1"

在主函数中使用

import { createApp } from 'vue'

import router from './router'
import store from './store'
import App from './App.vue'

createApp(App).use(router).use(store).mount('#app')

vue-router

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../views/HelloWorld.vue'

export default createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue-router组件中使用：

import { useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    console.log(route)
  }
}

vuex

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: {}
  },
  getters: {
    user: state => state.user
  },
  mutations: {
    setUser: (state, user) => {
      state.user = user
    }
  },
  actions: {
    setUser: ({ commit }) => commit('setUser'),
    setUsertAsync: ({ commit }) => setTimeout(() => commit('setUser'), 1000),
  }
})

vuex在组件中使用

import { useStore } from 'vuex'

export default {
  name: 'Counter',
  setup () {
    const store = useStore()
    const user = computed(() => store.getters.user)

    const setUser= () => store.dispatch('setUser')
    const setUsertAsync = () => store.dispatch('setUsertAsync')

    return { user, setUser，setUsertAsync }
  }
}

最后编辑于：2020.06.24 10:49:54