vue2.x和vue3.x目錄結(jié)構(gòu)沒有什么變化，只是一些使用方法變了，而且默認是安裝了TypeScript。下面總結(jié)一下目前我使用中發(fā)現(xiàn)的部分差異。

　　1: v-if與v-for的優(yōu)先級（更新）

　　　原則上，在vue中應(yīng)該避免在同一元素上使用 v-if 與 v-for 的。

　　　　2.x：v-for 的優(yōu)先級高于 v-if

　　　　3.x：v-if 的優(yōu)先級高于 v-for

　　2: 關(guān)于 computed: 3.X 把 computed 變成了一個計算屬性 API，所以可以有多個 computed，可以沿用 Vue.js 2.x 的使用方法，只是使用前要先引入。

　　3: 關(guān)于 watch:對于監(jiān)聽對象是分隔字符串時，需要在選項參數(shù)中指定 deep: true

　　4: 在 Vue3 中組件沒有filters選項，遷移過程中，可以用computed/methods替代。Vue3.0不能定義過濾器屬性，filters 將使用 computed 或者方法來代替，在模板語句中不再有{{ count | costumCount }}這種寫法。

　　5: vue3.X 中去掉了.sync,用v-model代替 并且同一個組件中不僅限于只有一個v-model。在 Vue2.0中一個組件只能定義一個 v-model，其實參數(shù)要實現(xiàn) v-model 的效果則需要使用 value.async 和 $emit("update:value") 。在 Vue 3.0中將支持多個 v-model，多個 v-model 用 v-model:value 來區(qū)分，在子組件改變v-model 傳過來的值一樣是使用$emit("update:value")。

　　6: 關(guān)于vuex的使用

　　　　vue2.0 創(chuàng)建倉庫 new Vuex.Store({})

　　　　vue3.0 創(chuàng)建倉庫 createStore({})

　　7:過渡動畫的類名改變

　　原來的 v-enter 改為 v-enter-from，原來的 v-leave 改為 v-leave-from

　　●main.js

　　vue2.x使用import Vue from 'vue'，然后使用new Vue()創(chuàng)建實例。vue3.x則是import {createApp} from 'vue'，通過createApp()來創(chuàng)建實例了。

　　這就導(dǎo)致了很多的插件或UI組件庫不能使用，比如ElementUI、iView...

　　●router.js創(chuàng)建路由

　　vue3.x需要引入createRouter創(chuàng)建地址路由。createWebHashHistory對應(yīng)之前的hash，createWebHistory對應(yīng)之前的history。

　　●vuex狀態(tài)管理

　　vue3.x中狀態(tài)管理的創(chuàng)建方式變?yōu)榱薱reateStore 。代碼結(jié)構(gòu)更精簡合理。

　　●Composition API

　　這個是vue3.x變化最大的地方，vue2.x數(shù)據(jù)存放在data，方法在methods，通過this去調(diào)用。但是在vue3.x這些都沒有了，所有的代碼全部都在 setup 里面實現(xiàn)，你頁面需要哪些方法，就要在當前頁引入即可。

　　●生命周期

　　vue3.x的生命周期也發(fā)生了一些變化。具體的就是原來的beforCreate和created周期統(tǒng)一被新的setup()取代了。其他的都在原來的周期名稱前加上on，更加語義化。