1.composition-api(https://composition-api.vuejs.org/)
a、更好的逻辑复用与代码组织
可以通过组合逻辑代码函数取代option式的组合代码
option式组件组合的业务逻辑分散在组件中的各处,需要先关注data,methods,computed,分散在各处的代码。(下图是官网中对比composition 和 options 组织代码的对比,可以看出composition API 将每个逻辑关注点的代码现在都被组合进了一个组合函数,大大减少了在组件中的代码来回跳转)
可以看出composition API 可以组织和抽取大部分的工具代码,来做代码复用,而不再像option式组件担心多个Mixin之间的数据污染。
例子
例一 常用状态复用
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
通过开启 webpack 配置中 usedExports: true 和 minimize: true,
清楚掉没有使用过的工具函数引用和代码
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
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 }
}
}