关于发布时间
具体时间可以看大家可以看看官方时间表。官方时间表
目前在Vue3处于Beta版本,后面主要是处理稳定性问题。也就是说主要Api不会有很多改进。尤大神从直播中说虽然很多想法,但是大的变化最快也会出现在3.1上面了。所以目前的版本应该应该和正式版差异很小了。 看来Q2能发布的可能性极大。
脑图
升级@vue/cli
为了让cli支持vue3需要将vue-cli升级到4.3.1以上
npm update -g @vue/cli vue -V ➜ frontend-basic git:(master) ✗ vue -V @vue/cli 4.3.1
创建项目
vue create vue3demo vue add vue-next // 添加vue3插件升级为vue3
创建Vue实例
Vue3使用API一律是函数式风格所以和new告别了。
// Vue3.0 createApp(App).use(router).use(store).mount('#app') // Vue2.0 new Vue({ router, store, render: h => h(App) }).$mount('#app')
响应式数据
模板定制
没有变化
<template> <div class="hello" style="border:1px solid"> <h1 ref="root">{{ msg }}</h1> {{state.count}} double is {{double}} <button @click="add">+</button> </div> </template>
声明响应式数据
// Vue2 export default { // .... data() { return { state: { count: 0 } }; }, } // Vue3 export default { // .... setup(){ const state = reactive({ count:0 }) return {state} } }
自定义事件
// Vue2 export default { // .... methods: { add() { this.state.count++; } }, } // Vue3 export default { // .... setup(){ const add = () => { state.count++ } return {add} } }
计算属性
// Vue2 export default { // ... computed: { double() { return this.state.count * 2; } }, } // Vue3 export default { // ... setup(){ const double = computed (() => state.count * 2 ) return {double} } }
监听器
// Vue2 export default { // ... watch: { count: value => { console.log("count is changed:", value); } } } // Vue3 export default { // ... setup(){ watch( () => state.count, value => { console.log('state change :',value) } ) } }
生命周期函数及获取Dom元素
// Vue2 export default { // ... mounted() { this.$refs.dom.style.color = "red"; } } // Vue3 export default { // ... setup(){ // ref 创建一个响应式的数据对象 const root = ref(null) onMounted(() => { // 关联节点 console.log('dom',root) const dom = root.value dom.style.color = 'red' }) } }
| Vue2 | Vue3 |
| beforeCreate | setup(替代) |
| created | setup(替代) |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
路由Vue-router
创建路由
// Vue2 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ // 路由配置不变 ] }) // Vue3 const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ // 路由配置不变 ] })
使用路由
// Vue2 export default { name: "Home", methods: { goHome() { this.$router.push('Home') } } }; // Vue3 export default { setup() { const router = useRouter() const goHome = () => router.push('Home') return { goHome}; } };
统一状态管理Vuex
创建Vuex
// Vue2 export default new Vuex.Store({ state: { count:1 }, mutations: { inc(state){ state.count ++ } }, actions: { }, modules: { } }) // Vue3 export default Vuex.createStore({ state: { count:1 }, mutations: { add(state){ state.count ++ } }, actions: { }, modules: { } });
使用Vuex
// Vue2 export default { name: "Home", data() { return { state: this.$store.state }; }, computed: { double() { return this.$store.state.count * 2; }, }, methods: { add() { this.$store.commit("add"); } } }; // Vue3 import { computed, reactive } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore() const state = store.state const double = computed(() => store.state.count * 2) const add = () => { store.commit("add"); }; return { state, add ,double}; } };
