以下列舉遷移到 vue3系吩，必須適配的幾個點(diǎn)澈蚌，vue2 項目才能正常運(yùn)行在 vue3 上邪财。更多查看完整的非兼容特性列表
-
main.js
-
創(chuàng)建應(yīng)用實(shí)例
// 之前 - Vue 2 import Vue from 'vue' import App from './App' Vue.config.productionTip = false // vue3 不再需要 App.mpType = 'app' // vue3 不再需要 const app = new Vue({ ...App }) app.$mount() // 之后 - Vue 3 import App from './App' import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) return { app } } 全局屬性啥刻，例如：全局網(wǎng)絡(luò)請求
// 之前 - Vue 2 Vue.prototype.$http = () => {}; // 之后 - Vue 3 const app = createApp({}); app.config.globalProperties.$http = () => {};- 插件使用煤搜，例如：使用 vuex 的 store
// 之前 - Vue 2 import store from "./store"; Vue.prototype.$store = store; // 之后 - Vue 3 import store from "./store"; const app = createApp(App); app.use(store); -
-
項目根目錄必需創(chuàng)建 index.html 文件，粘貼復(fù)制如下內(nèi)容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title></title> <!--preload-links--> <!--app-context--> </head> <body> <div id="app"><!--app-html--></div> <script type="module" src="/main.js"></script> </body> </html> -
只支持使用 ES6 模塊規(guī)范凡伊，commonJS 需改為 ES6 模塊規(guī)范
-
導(dǎo)入模塊, 例如：
// 之前 - Vue 2, 使用 commonJS var utils = require("../../../common/util.js"); // 之后 - Vue 3零渐， 只支持 ES6 模塊 import utils from "../../../common/util.js"; -
模塊導(dǎo)出，例如：
// 之前 - Vue 2, 依賴如使用 commonJS 方式導(dǎo)出 module.exports.X = X; // 之后 - Vue 3系忙， 可手動改為 ES6 導(dǎo)出 export default { X };
-
-
vuex 用法
// 之前 - Vue 2 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {} }) export default store // 之后 - Vue 3 import { createStore } from 'vuex' const store = createStore({ state: {} }) export default store -
避免在同一元素上同時使用 v-if 與 v-for
而 Vue3 中诵盼，v-if 總是優(yōu)先于 v-for 生效。以上寫法將會在 Vue3 中與預(yù)期不符合银还，由于語法上存在歧義风宁，建議避免在同一元素上同時使用兩者（更多）。
-
生命周期的適配
在Vue3中組件卸載的生命周期被重新命名
-
destroyed修改為unmounted -
beforeDestroy修改為beforeUnmount
-
-
事件的適配
Vue3 現(xiàn)在提供了一個
emits選項蛹疯，類似于現(xiàn)有props選項戒财。此選項可用于定義組件可以向其父對象發(fā)出的事件， 更多強(qiáng)烈建議使用
emits記錄每個組件發(fā)出的所有事件捺弦。
這一點(diǎn)特別重要饮寞，因為去除了.native修飾符。emits 現(xiàn)在在未使用聲明的事件的所有偵聽器都將包含在組件的中$attrs列吼，默認(rèn)情況下幽崩，該偵聽器將綁定到組件的根節(jié)點(diǎn)。
<template>
<button @click="onClick">OK</button>
</template>
<script>
export default {
emits: ['click'],
methods:{
onClick(){
this.$emit('click', 'OK')
}
}
}
</script>
-
v-model 的適配 Vue3 的 v-model 相對 Vue2 來說 寞钥，有了較大的改變慌申。可以使用多
model,相應(yīng)語法也有變化理郑。更多-
修改 modelValue 用于自定義組件時太示，Vue3 v-model prop 和事件默認(rèn)名稱已更改
props.value修改為props.modelValue,event.value修改為update:modelValueexport default { props: { // value:String, // 替換 value 為 modelValue modelValue:String } }
-
-
事件返回 將之前的
this.$emit('input')修改為this.$emit('update:modelValue')，vue3 中將省略這一步驟自定義組件上的 v-model 相當(dāng)于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" /> <!-- 是以下的簡寫: --> <ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
若需要更改 model 名稱香浩，作為組件內(nèi) model 選項的替代，現(xiàn)在我們可以將一個 argument 傳遞給 v-model：
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的簡寫: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
-
插槽的適配
Vue3 將不支持
slot="xxx"的用法 臼勉，請使用v-slot:xxx用法邻吭。更多<!-- Vue2 支持的用法 --> <uni-nav-bar> <view slot="left" class="city"> <!-- ... --> </view> </uni-nav-bar><!-- Vue3 支持的用法 --> <uni-nav-bar> <template v-slot:left> <view class="city"> <!-- ... --> </view> </template> </uni-nav-bar> 從 Vue 3.0 開始，過濾器已刪除宴霸，不再支持囱晴，建議用方法調(diào)用或計算屬性替換它們。更多
