文章目录
升级到Vue3
升级VueCLI
VueCLI需要在4.3.1以上才可以支持Vue3
npm update -g @vue/cli
vue -V
@vue/cli 4.4.6
创建项目
vue create vue3-learning
vue add vue-next # 添加 vue3 插件升级为 vue3
在创建项目时选择手动添加配置,选择vue-router和Vuex,这样创建完的项目各个插件也都会升级为支持Vue3的版本
{
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-beta.1",
"vue-router": "^4.0.0-alpha.6",
"vuex": "^4.0.0-alpha.1"
}
}
创建Vue实例
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App)
.use(router)
.use(store)
.mount('#app');
创建Router
import {createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
创建路由的方式与以前有所变化,路由模式除了Hash模式(createWebHashHistory
)和History模式(createWebHistory
),还多了带缓存的History路由(createMemoryHistory
)
使用路由跳转的API也有所变化:
import {useRouter} from 'vue-router';
export default {
setup() {
const router = useRouter();
const goHome = () => router.push('/');
return {goHome}
}
}
关于router的具体变化,后面再单独学习
创建Store
import {createStore} from 'vuex';
export default createStore({
state: {
count: 0
},
mutations: {
changeCount(state, isAdd) {
state.count = isAdd ? state.count + 1 : state.count - 1;
}
},
actions: {},
modules: {}
});
使用:
import {useStore} from 'vuex';
export default {
setup() {
const store = useStore();
const storeState = store.state;
return {storeState}
}
}
可以看出来,Vuex和vue-router,API都有了一些变化,与React Hooks的API很类似,但是基本原理没有太大变化
setup
setup
函数是新的Composition API的入口点
调用时机
setup
在创建组件之前调用(在beforeCreate
之前),Props初始化后就会调用setup
函数,在beforeCreate
钩子前被调用
返回值
setup
返回的对象的属性将被合并到组件模板的渲染上下文,也可以返回一个渲染函数