前言
Vue3.0 在去年9月正式發佈了，也有許多小夥伴都熱情的擁抱Vue3.0。去年年底我們新項目使用Vue3.0來開發，這篇文章就是在使用後的一個總結， 包含Vue3新特性的使用以及一些用法上的變更。
爲什麼要升級Vue3
使用Vue2.x的小夥伴都熟悉，Vue2.x中所有數據都是定義在data中，方法定義在methods中的，並且使用this來調用對應的數據和方法。那Vue3.x中就可以不這麼玩了， 具體怎麼玩我們後續再說， 先說一下Vue2.x版本這麼寫有什麼缺陷，所以纔會進行升級變更的。
回顧Vue2.x實現加減
<template>
<div class="homePage">
<p>count: {{ count }}</p>
<p>倍數： {{ multiple }}</p>
<div>
<button style="margin-right:10px" @click="increase">加1</button>
<button @click="decrease">減一</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
computed: {
multiple() {
return 2 * this.count;
},
},
methods: {
increase() {
this.count++;
},
decrease() {
this.count++;
},
},
};
</script>
上面代碼只是實現了對count的加減以及顯示倍數， 就需要分別在data、methods、computed中進行操作，當我們增加一個需求，就會出現下圖的情況：
當我們業務複雜了就會大量出現上面的情況， 隨着複雜度上升，就會出現這樣一張圖， 每個顏色的方塊表示一個功能：
甚至一個功能還有會依賴其他功能，全攪合在一起。
當這個組件的代碼超過幾百行時，這時增加或者修改某個需求， 就要在data、methods、computed以及mounted中反覆的跳轉，這其中的的痛苦寫過的都知道。
那我們就想啊， 如果可以按照邏輯進行分割，將上面這張圖變成下邊這張圖，是不是就清晰很多了呢, 這樣的代碼可讀性和可維護性都更高：
那麼vue2.x版本給出的解決方案就是Mixin, 但是使用Mixin也會遇到讓人苦惱的問題：
-
命名衝突問題 -
不清楚暴露出來的變量的作用 -
邏輯重用到其他 component 經常遇到問題
關於上面經常出現的問題我就不一一舉例了，使用過的小夥伴多多少少都會遇到。文章的重點不是Mixin,如果確實想知道的就留言啦~
所以，我們Vue3.x就推出了Composition API主要就是爲了解決上面的問題，將零散分佈的邏輯組合在一起來維護，並且還可以將單獨的功能邏輯拆分成單獨的文件。接下來我們就重點認識Composition API。
Composition API
setup
setup 是Vue3.x新增的一個選項， 他是組件內使用 Composition API的入口。
setup執行時機
我在學習過程中看到很多文章都說setup 是在 beforeCreate和created之間， 這個結論是錯誤的。實踐是檢驗真理的唯一標準， 於是自己去檢驗了一下：
export default defineComponent ({
beforeCreate() {
console.log("----beforeCreate----");
},
created() {
console.log("----created----");
},
setup() {
console.log("----setup----");
},
})
setup 執行時機是在beforeCreate之前執行，詳細的可以看後面生命週期講解。
::: warning 由於在執行setup 時尚未創建組件實例，因此在 setup 選項中沒有 this。:::
setup 參數
使用setup時，它接受兩個參數：
-
props: 組件傳入的屬性 -
context
setup中接受的props是響應式的， 當傳入新的props 時，會及時被更新。由於是響應式的， 所以不可以使用ES6解構，解構會消除它的響應式。
錯誤代碼示例， 這段代碼會讓props不再支持響應式：
// demo.vue
export default defineComponent ({
setup(props, context) {
const { name } = props
console.log(name)
},
})
那在開發中我們想要使用解構，還能保持props的響應式，有沒有辦法解決呢？大家可以思考一下，在後面toRefs學習的地方爲大家解答。
接下來我們來說一下setup接受的第二個參數context，我們前面說了setup中不能訪問Vue2中最常用的this對象，所以context中就提供了this中最常用的三個屬性：attrs、slot 和emit，分別對應Vue2.x中的 $attr屬性、slot插槽 和$emit發射事件。並且這幾個屬性都是自動同步最新的值，所以我們每次使用拿到的都是最新值。
reactive、ref與toRefs
在vue2.x中， 定義數據都是在data中， 但是Vue3.x 可以使用reactive和ref來進行數據定義。
那麼ref和reactive他們有什麼區別呢？分別什麼時候使用呢？說到這裏，我又不得不提一下，看到很多網上文章說(reactive用於處理對象的雙向綁定，ref則處理js基礎類型的雙向綁定)。我其實不太贊同這樣的說法，這樣很容易初學者認爲ref就能處理js基本類型， 比如ref也是可以定義對象的雙向綁定的啊， 上段代碼：
setup() {
const obj = ref({count:1, name:"張三"})
setTimeout(() =>{
obj.value.count = obj.value.count + 1
obj.value.name = "李四"
}, 1000)
return{
obj
}
}
我們將obj.count和obj.name綁定到頁面上也是可以的；但是reactive函數確實可以代理一個對象， 但是不能代理基本類型，例如字符串、數字、boolean等。
接下來使用代碼展示一下ref、reactive的使用：
運行效果:
上面的代碼中，我們綁定到頁面是通過user.name,user.age；這樣寫感覺很繁瑣，我們能不能直接將user中的屬性解構出來使用呢?答案是不能直接對user進行結構， 這樣會消除它的響應式， 這裏就和上面我們說props不能使用ES6直接解構就呼應上了。那我們就想使用解構後的數據怎麼辦，解決辦法就是使用toRefs。
toRefs用於將一個reactive對象轉化爲屬性全部爲ref對象的普通對象。具體使用方式如下：
<template>
<div class="homePage">
<p>第 {{ year }} 年</p>
<p>姓名： {{ nickname }}</p>
<p>年齡： {{ age }}</p>
</div>
</template>
<script>
import { defineComponent, reactive, ref ,toRefs} from "vue";
export default defineComponent({
setup() {
const year = ref(0);
const user = reactive({ nickname: "xiaofan", age: 26, gender: "女" });
setInterval(() =>{
year.value ++
user.age ++
}, 1000)
return {
year,
// 使用reRefs
...toRefs(user)
}
},
});
</script>
生命週期鉤子
我們可以直接看生命週期圖來認識都有哪些生命週期鉤子(圖片是根據官網翻譯後繪製的)：
從圖中我們可以看到Vue3.0新增了setup，這個在前面我們也詳細說了， 然後是將Vue2.x中的beforeDestroy名稱變更成beforeUnmount; destroyed 表更爲 unmounted，作者說這麼變更純粹是爲了更加語義化，因爲一個組件是一個mount和unmount的過程。其他Vue2中的生命週期仍然保留。
上邊生命週期圖中並沒包含全部的生命週期鉤子， 還有其他的幾個， 全部生命週期鉤子如圖所示：
我們可以看到beforeCreate和created被setup替換了（但是Vue3中你仍然可以使用， 因爲Vue3是向下兼容的， 也就是你實際使用的是vue2的）。其次，鉤子命名都增加了on; Vue3.x還新增用於調試的鉤子函數onRenderTriggered和onRenderTricked
下面我們簡單使用幾個鉤子， 方便大家學習如何使用，Vue3.x中的鉤子是需要從vue中導入的：
import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered
} from "vue";
export default defineComponent({
// beforeCreate和created是vue2的
beforeCreate() {
console.log("------beforeCreate-----");
},
created() {
console.log("------created-----");
},
setup() {
console.log("------setup-----");
// vue3.x生命週期寫在setup中
onBeforeMount(() => {
console.log("------onBeforeMount-----");
});
onMounted(() => {
console.log("------onMounted-----");
});
// 調試哪些數據發生了變化
onRenderTriggered((event) =>{
console.log("------onRenderTriggered-----",event);
})
},
});
關於生命週期相關的內容就介紹到這裏，下面我們介紹一下Vue3.x中watch有什麼不同。
watch 與 watchEffect 的用法
watch 函數用來偵聽特定的數據源，並在回調函數中執行副作用。默認情況是惰性的，也就是說僅在偵聽的源數據變更時才執行回調。
watch(source, callback, [options])
參數說明：
-
source:可以支持string,Object,Function,Array; 用於指定要偵聽的響應式變量 -
callback: 執行的回調函數 -
options：支持deep、immediate 和 flush 選項。
接下來我會分別介紹這個三個參數都是如何使用的， 如果你對watch的使用不明白的請往下看：
偵聽reactive定義的數據
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
export default defineComponent({
setup() {
const state = reactive({ nickname: "xiaofan", age: 20 });
setTimeout(() =>{
state.age++
},1000)
// 修改age值時會觸發 watch的回調
watch(
() => state.age,
(curAge, preAge) => {
console.log("新值:", curAge, "老值:", preAge);
}
);
return {
...toRefs(state)
}
},
});
偵聽ref定義的數據
const year = ref(0)
setTimeout(() =>{
year.value ++
},1000)
watch(year, (newVal, oldVal) =>{
console.log("新值:", newVal, "老值:", oldVal);
})
偵聽多個數據
上面兩個例子中，我們分別使用了兩個watch, 當我們需要偵聽多個數據源時， 可以進行合併， 同時偵聽多個數據：
watch([() => state.age, year], ([curAge, preAge], [newVal, oldVal]) => {
console.log("新值:", curAge, "老值:", preAge);
console.log("新值:", newVal, "老值:", oldVal);
});
偵聽複雜的嵌套對象
我們實際開發中，複雜數據隨處可見， 比如：
const state = reactive({
room: {
id: 100,
attrs: {
size: "140平方米",
type:"三室兩廳"
},
},
});
watch(() => state.room, (newType, oldType) => {
console.log("新值:", newType, "老值:", oldType);
}, {deep:true});
如果不使用第三個參數deep:true， 是無法監聽到數據變化的。
前面我們提到，默認情況下，watch是惰性的, 那什麼情況下不是惰性的， 可以立即執行回調函數呢？其實使用也很簡單， 給第三個參數中設置immediate: true即可。關於flush配置，還在學習，後期會補充
stop 停止監聽
我們在組件中創建的watch監聽，會在組件被銷燬時自動停止。如果在組件銷燬之前我們想要停止掉某個監聽， 可以調用watch()函數的返回值，操作如下：
const stopWatchRoom = watch(() => state.room, (newType, oldType) => {
console.log("新值:", newType, "老值:", oldType);
}, {deep:true});
setTimeout(()=>{
// 停止監聽
stopWatchRoom()
}, 3000)
還有一個監聽函數watchEffect,在我看來watch已經能滿足監聽的需求，爲什麼還要有watchEffect呢？雖然我沒有get到它的必要性，但是還是要介紹一下watchEffect，首先看看它的使用和watch究竟有何不同。
import { defineComponent, ref, reactive, toRefs, watchEffect } from "vue";
export default defineComponent({
setup() {
const state = reactive({ nickname: "xiaofan", age: 20 });
let year = ref(0)
setInterval(() =>{
state.age++
year.value++
},1000)
watchEffect(() => {
console.log(state);
console.log(year);
}
);
return {
...toRefs(state)
}
},
});
執行結果首先打印一次state和year值；然後每隔一秒，打印state和year值。
從上面的代碼可以看出， 並沒有像watch一樣需要先傳入依賴，watchEffect會自動收集依賴, 只要指定一個回調函數。在組件初始化時， 會先執行一次來收集依賴， 然後當收集到的依賴中數據發生變化時， 就會再次執行回調函數。所以總結對比如下：
-
watchEffect 不需要手動傳入依賴 -
watchEffect 會先執行一次用來自動收集依賴 -
watchEffect 無法獲取到變化前的值， 只能獲取變化後的值
::: danger 留一個思考題：如果定義一個非響應式的值， watch和watchEffect可以監聽到值的變化嗎？:::
上面介紹了Vue3 Composition API的部分內容,還有很多非常好用的API, 建議直接查看官網composition-api。
其實我們也能進行自定義封裝。
自定義 Hooks
開篇的時候我們使用Vue2.x寫了一個實現加減的例子， 這裏可以將其封裝成一個hook, 我們約定這些「自定義 Hook」以 use 作爲前綴，和普通的函數加以區分。
useCount.ts 實現：
import { ref, Ref, computed } from "vue";
type CountResultProps = {
count: Ref<number>;
multiple: Ref<number>;
increase: (delta?: number) => void;
decrease: (delta?: number) => void;
};
export default function useCount(initValue = 1): CountResultProps {
const count = ref(initValue);
const increase = (delta?: number): void => {
if (typeof delta !== "undefined") {
count.value += delta;
} else {
count.value += 1;
}
};
const multiple = computed(() => count.value *2 )
const decrease = (delta?: number): void => {
if (typeof delta !== "undefined") {
count.value -= delta;
} else {
count.value -= 1;
}
};
return {
count,
multiple,
increase,
decrease,
};
}
接下來看一下在組件中使用useCount這個 hook:
<template>
<p>count: {{ count }}</p>
<p>倍數： {{ multiple }}</p>
<div>
<button @click="increase()">加1</button>
<button @click="decrease()">減一</button>
</div>
</template>
<script lang="ts">
import useCount from "../hooks/useCount";
setup() {
const { count, multiple, increase, decrease } = useCount(10);
return {
count,
multiple,
increase,
decrease,
};
},
</script>
開篇Vue2.x實現，分散在data,method,computed等， 如果剛接手項目，實在無法快速將data字段和method關聯起來，而Vue3的方式可以很明確的看出，將count相關的邏輯聚合在一起， 看起來舒服多了， 而且useCount還可以擴展更多的功能。
項目開發完之後，後續還會寫一篇總結項目中使用到的「自定義Hooks的文章」，幫助大家更高效的開發， 關於Composition API和自定義Hooks就介紹到這裏， 接下來簡單介紹一下vue2.x與vue3響應式對比。
簡單對比vue2.x與vue3.x響應式
其實在Vue3.x 還沒有發佈beta的時候， 很火的一個話題就是Vue3.x 將使用Proxy 取代Vue2.x 版本的 Object.defineProperty。
沒有無緣無故的愛，也沒有無緣無故的恨。爲何要將Object.defineProperty換掉呢，咋們可以簡單聊一下。
我剛上手Vue2.x的時候就經常遇到一個問題，數據更新了啊，爲何頁面不更新呢？什麼時候用$set更新，什麼時候用$forceUpdate強制更新，你是否也一度陷入困境。後來的學習過程中開始接觸源碼，才知道一切的根源都是 Object.defineProperty。
對這塊想要深入瞭解的小夥伴可以看這篇文章 爲什麼Vue3.0不再使用defineProperty實現數據監聽？要詳細解釋又是一篇文章，這裏就簡單對比一下Object.defineProperty 與Proxy
-
Object.defineProperty只能劫持對象的屬性， 而Proxy是直接代理對象
由於Object.defineProperty只能劫持對象屬性，需要遍歷對象的每一個屬性，如果屬性值也是對象，就需要遞歸進行深度遍歷。但是Proxy直接代理對象， 不需要遍歷操作
-
Object.defineProperty對新增屬性需要手動進行Observe
因爲Object.defineProperty劫持的是對象的屬性，所以新增屬性時，需要重新遍歷對象， 對其新增屬性再次使用Object.defineProperty進行劫持。也就是Vue2.x中給數組和對象新增屬性時，需要使用$set才能保證新增的屬性也是響應式的, $set內部也是通過調用Object.defineProperty去處理的。
Teleport
Teleport是Vue3.x新推出的功能， 沒聽過這個詞的小夥伴可能會感到陌生；翻譯過來是傳送的意思，可能還是覺得不知所以，沒事下邊我就給大家形象的描述一下。
Teleport 是什麼呢？
Teleport 就像是哆啦A夢中的「任意門」，任意門的作用就是可以將人瞬間傳送到另一個地方。有了這個認識，我們再來看一下爲什麼需要用到Teleport的特性呢，看一個小例子：
在子組件Header中使用到Dialog組件，我們實際開發中經常會在類似的情形下使用到 Dialog ，此時Dialog就被渲染到一層層子組件內部，處理嵌套組件的定位、z-index和樣式都變得困難。
Dialog從用戶感知的層面，應該是一個獨立的組件，從dom結構應該完全剝離Vue頂層組件掛載的DOM；同時還可以使用到Vue組件內的狀態（data或者props）的值。簡單來說就是,即希望繼續在組件內部使用Dialog,又希望渲染的DOM結構不嵌套在組件的DOM中。
此時就需要Teleport上場，我們可以用<Teleport>包裹Dialog, 此時就建立了一個傳送門，可以將Dialog渲染的內容傳送到任何指定的地方。
接下來就舉個小例子，看看Teleport的使用方式
Teleport的使用
我們希望Dialog渲染的dom和頂層組件是兄弟節點關係, 在index.html文件中定義一個供掛載的元素:
<body>
<div id="app"></div>
+ <div id="dialog"></div>
</body>
定義一個Dialog組件Dialog.vue, 留意 to 屬性， 與上面的id選擇器一致：
<template>
<teleport to="#dialog">
<div class="dialog">
<div class="dialog_wrapper">
<div class="dialog_header" v-if="title">
<slot name="header">
<span>{{title}}</span>
</slot>
</div>
</div>
<div class="dialog_content">
<slot></slot>
</div>
<div class="dialog_footer">
<slot name="footer"></slot>
</div>
</div>
</teleport>
</template>
最後在一個子組件Header.vue中使用Dialog組件,這裏主要演示 Teleport的使用，不相關的代碼就省略了。header組件
<div class="header">
...
<navbar />
+ <Dialog v-if="dialogVisible"></Dialog>
</div>
...
Dom渲染效果如下：
可以看到，我們使用 teleport 組件，通過 to 屬性，指定該組件渲染的位置與 <div id="app"></div> 同級，也就是在 body 下，但是 Dialog 的狀態 dialogVisible 又是完全由內部 Vue 組件控制.
Suspense
Suspense是Vue3.x中新增的特性， 那它有什麼用呢？別急，我們通過Vue2.x中的一些場景來認識它的作用。
Vue2.x中應該經常遇到這樣的場景：
<template>
<div>
<div v-if="!loading">
...
</div>
<div v-if="loading">
加載中...
</div>
</div>
</template>
在前後端交互獲取數據時， 是一個異步過程，一般我們都會提供一個加載中的動畫，當數據返回時配合v-if來控制數據顯示。
如果你使用過vue-async-manager這個插件來完成上面的需求， 你對Suspense可能不會陌生，Vue3.x感覺就是參考了vue-async-manager.
Vue3.x新出的內置組件Suspense, 它提供兩個template slot, 剛開始會渲染一個fallback狀態下的內容， 直到到達某個條件後纔會渲染default狀態的正式內容， 通過使用Suspense組件進行展示異步渲染就更加的簡單。:::warning 如果使用 Suspense, 要返回一個promise :::Suspense 組件的使用：
<Suspense>
<template #default>
<async-component></async-component>
</template>
<template #fallback>
<div>
Loading...
</div>
</template>
</Suspense>
asyncComponent.vue:
<template>
<div>
<h4>這個是一個異步加載數據</h4>
<p>用戶名：{{user.nickname}}</p>
<p>年齡：{{user.age}}</p>
</div>
</template>
<script>
import { defineComponent } from "vue"
import axios from "axios"
export default defineComponent({
setup(){
const rawData = await axios.get("http://xxx.xinp.cn/user")
return {
user: rawData.data
}
}
})
</script>
從上面代碼來看，Suspense 只是一個帶插槽的組件，只是它的插槽指定了default 和 fallback 兩種狀態。
片段（Fragment）
在 Vue2.x 中， template中只允許有一個根節點：
<template>
<div>
<span></span>
<span></span>
</div>
</template>
但是在 Vue3.x 中，你可以直接寫多個根節點， 是不是很爽：
<template>
<span></span>
<span></span>
</template>
更好的 Tree-Shaking
Vue3.x 在考慮到 tree-shaking的基礎上重構了全局和內部API, 表現結果就是現在的全局API需要通過 ES Module的引用方式進行具名引用， 比如在Vue2.x中，我們要使用 nextTick:
// vue2.x
import Vue from "vue"
Vue.nextTick(()=>{
...
})
Vue.nextTick() 是一個從 Vue 對象直接暴露出來的全局 API，其實 $nextTick() 只是 Vue.nextTick() 的一個簡易包裝，只是爲了方便而把後者的回調函數的 this 綁定到了當前的實例。雖然我們藉助webpack的tree-shaking,但是不管我們實際上是否使用Vue.nextTick(),最終都會進入我們的生產代碼， 因爲 Vue實例是作爲單個對象導出的， 打包器無法堅持出代碼總使用了對象的哪些屬性。
在 Vue3.x中改寫成這樣：
import { nextTick } from "vue"
nextTick(() =>{
...
})
受影響的 API
這是一個比較大的變化， 因爲以前的全局 API 現在只能通過具名導入，這一更改會對以下API有影響：
-
Vue.nextTick -
Vue.observable（用Vue.reactive替換） -
Vue.version -
Vue.compile（僅限完整版本時可用） -
Vue.set（僅在 2.x 兼容版本中可用） -
Vue.delete（與上同）
內置工具
出來上面的 API外， 還有許多內置的組件
:::warning 重要
以上僅適用於 ES Modules builds，用於支持 tree-shaking 的綁定器——UMD 構建仍然包括所有特性，並暴露 Vue 全局變量上的所有內容 (編譯器將生成適當的輸出，以使用全局外的 api 而不是導入)。:::
前面都是Vue3.0的一些新特性，後面着重介紹一下相對於Vue2.x來說， 有什麼變更呢？
變更
slot 具名插槽語法
在Vue2.x中， 具名插槽的寫法：
<!-- 子組件中：-->
<slot name="title"></slot>
在父組件中使用：
<template slot="title">
<h1>歌曲：成都</h1>
<template>
如果我們要在slot上面綁定數據，可以使用作用域插槽，實現如下：
// 子組件
<slot name="content" :data="data"></slot>
export default {
data(){
return{
data:["走過來人來人往","不喜歡也得欣賞","陪伴是最長情的告白"]
}
}
}
<!-- 父組件中使用 -->
<template slot="content" slot-scope="scoped">
<div v-for="item in scoped.data">{{item}}</div>
<template>
在Vue2.x中具名插槽和作用域插槽分別使用slot和slot-scope來實現， 在Vue3.0中將slot和slot-scope進行了合併同意使用。
Vue3.0中v-slot：
<!-- 父組件中使用 -->
<template v-slot:content="scoped">
<div v-for="item in scoped.data">{{item}}</div>
</template>
<!-- 也可以簡寫成： -->
<template #content="{data}">
<div v-for="item in data">{{item}}</div>
</template>
自定義指令
首先回顧一下 Vue 2 中實現一個自定義指令：
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
在Vue 2 中， 自定義指令通過以下幾個可選鉤子創建：
-
bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。 -
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 -
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 -
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。 -
unbind：只調用一次，指令與元素解綁時調用。
在Vue 3 中對自定義指令的 API進行了更加語義化的修改， 就如組件生命週期變更一樣， 都是爲了更好的語義化， 變更如下：
所以在Vue3 中， 可以這樣來自定義指令：
const { createApp } from "vue"
const app = createApp({})
app.directive('focus', {
mounted(el) {
el.focus()
}
})
然後可以在模板中任何元素上使用新的 v-focus指令， 如下：
<input v-focus />
v-model 升級
在使用Vue 3 之前就瞭解到 v-model 發生了很大的變化， 使用過了之後才真正的get到這些變化， 我們先縱觀一下發生了哪些變化， 然後再針對的說一下如何使用：
-
變更：在自定義組件上使用 v-model時， 屬性以及事件的默認名稱變了 -
變更： v-bind的.sync修飾符在 Vue 3 中又被去掉了, 合併到了v-model裏 -
新增：同一組件可以同時設置多個 v-model -
新增：開發者可以自定義 v-model修飾符
有點懵？彆着急，往下看 在Vue2 中， 在組件上使用 v-model其實就相當於傳遞了value屬性， 並觸發了input事件：
<!-- Vue 2 -->
<search-input v-model="searchValue"><search-input>
<!-- 相當於 -->
<search-input :value="searchValue" @input="searchValue=$event"><search-input>
這時v-model只能綁定在組件的value屬性上，那我們就不開心了， 我們就像給自己的組件用一個別的屬性，並且我們不想通過觸發input來更新值，在.async出來之前，Vue 2 中這樣實現：
// 子組件：searchInput.vue
export default {
model:{
prop: 'search',
event:'change'
}
}
修改後， searchInput 組件使用v-model就相當於這樣：
<search-input v-model="searchValue"><search-input>
<!-- 相當於 -->
<search-input :search="searchValue" @change="searchValue=$event"><search-input>
但是在實際開發中，有些場景我們可能需要對一個 prop 進行“雙向綁定”， 這裏以最常見的 modal爲例子：modal挺合適屬性雙向綁定的，外部可以控制組件的visible顯示或者隱藏，組件內部關閉可以控制 visible屬性隱藏，同時visible 屬性同步傳輸到外部。組件內部， 當我們關閉modal時, 在子組件中以update:PropName模式觸發事件：
this.$emit('update:visible', false)
然後在父組件中可以監聽這個事件進行數據更新：
<modal :visible="isVisible" @update:visible="isVisible = $event"></modal>
此時我們也可以使用v-bind.async來簡化實現：
<modal :visible.async="isVisible"></modal>
上面回顧了 Vue2 中v-model實現以及組件屬性的雙向綁定，那麼在Vue 3 中應該怎樣實現的呢？
在Vue3 中,在自定義組件上使用v-model,相當於傳遞一個modelValue 屬性， 同時觸發一個update:modelValue事件：
<modal v-model="isVisible"></modal>
<!-- 相當於 -->
<modal :modelValue="isVisible" @update:modelValue="isVisible = $event"></modal>
如果要綁定屬性名， 只需要給v-model傳遞一個參數就行, 同時可以綁定多個v-model：
<modal v-model:visible="isVisible" v-model:content="content"></modal>
<!-- 相當於 -->
<modal
:visible="isVisible"
:content="content"
@update:visible="isVisible"
@update:content="content"
/>
不知道你有沒有發現，這個寫法完全沒有.async什麼事兒了， 所以啊，Vue 3 中又拋棄了.async寫法， 統一使用v-model
異步組件
Vue3 中 使用 defineAsyncComponent 定義異步組件，配置選項 component 替換爲 loader ,Loader 函數本身不再接收 resolve 和 reject 參數，且必須返回一個 Promise，用法如下：
<template>
<!-- 異步組件的使用 -->
<AsyncPage />
</tempate>
<script>
import { defineAsyncComponent } from "vue";
export default {
components: {
// 無配置項異步組件
AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),
// 有配置項異步組件
AsyncPageWithOptions: defineAsyncComponent({
loader: () => import(".NextPage.vue"),
delay: 200,
timeout: 3000,
errorComponent: () => import("./ErrorComponent.vue"),
loadingComponent: () => import("./LoadingComponent.vue"),
})
},
}
</script>
本文分享自微信公衆號 - 1024譯站（trans1024）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。