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

a、更好的邏輯復(fù)用與代碼組織

可以通過組合邏輯代碼函數(shù)取代option式的組合代碼
option式組件組合的業(yè)務(wù)邏輯分散在組件中的各處，需要先關(guān)注data,methods,computed,分散在各處的代碼。（下圖是官網(wǎng)中對比composition 和 options 組織代碼的對比，可以看出composition API 將每個邏輯關(guān)注點的代碼現(xiàn)在都被組合進了一個組合函數(shù)，大大減少了在組件中的代碼來回跳轉(zhuǎn)）
可以看出composition API 可以組織和抽取大部分的工具代碼，來做代碼復(fù)用，而不再像option式組件擔(dān)心多個Mixin之間的數(shù)據(jù)污染。

兩種代碼組織方式的對比.png

例子

例一 常用狀態(tài)復(fù)用

import { ref } from 'vue'

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

例二 model層邏輯復(fù)用

import { ref, onMounted } from 'vue'

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

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

    return { res }
}

等等

b、更好的類型推導(dǎo)

在option式組件中，通過this上下文取當(dāng)前組件實例屬性的數(shù)據(jù)和方法，導(dǎo)致類型推導(dǎo)難以追蹤

2.更好的tree-shaking

導(dǎo)出兩個工具函數(shù).png

只使用到其中一個.png

打包后會都打包進去.png

通過開啟 webpack 配置中 usedExports: true 和 minimize: true，
清楚掉沒有使用過的工具函數(shù)引用和代碼

優(yōu)化后.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"

在主函數(shù)中使用

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 }
  }
}