站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)vue3.0新特性的總結(jié)分享，Vue3.0從20年九月發(fā)布第一個(gè)One Piece版本，到現(xiàn)在一直在更新優(yōu)化；中文版的官方文檔也已經(jīng)放出；那么作為終端用戶(hù)的我們來(lái)看下Vue3新增了哪些功能和特性。希望對(duì)大家有幫助。
尤大大在B站直播時(shí)分享了Vue3.0的幾個(gè)亮點(diǎn)：
-
Performance：性能優(yōu)化
-
Tree-shaking support：支持搖樹(shù)優(yōu)化
-
Composition API：組合API
-
Fragment，Teleport，Suspense：新增的組件
-
Better TypeScript support：更好的TypeScript支持
-
Custom Renderer API：自定義渲染器
在性能方面，對(duì)比Vue2.x，性能提升了1.3~2倍左右；打包后的體積也更小了，如果單單寫(xiě)一個(gè)HelloWorld進(jìn)行打包，只有13.5kb；加上所有運(yùn)行時(shí)特性，也不過(guò)22.5kb。
那么作為終端用戶(hù)的我們，在開(kāi)發(fā)時(shí)，和Vue2.x有什么不同呢？Talk is cheap，我們還是來(lái)看代碼。
Tree-shaking
Vue3最重要的變化之一就是引入了Tree-Shaking，Tree-Shaking帶來(lái)的bundle體積更小是顯而易見(jiàn)的。在2.x版本中，很多函數(shù)都掛載在全局Vue對(duì)象上，比如nextTick、nextTick、nextTick、set等函數(shù)，因此雖然我們可能用不到，但打包時(shí)只要引入了vue這些全局函數(shù)仍然會(huì)打包進(jìn)bundle中。
而在Vue3中，所有的API都通過(guò)ES6模塊化的方式引入，這樣就能讓webpack或rollup等打包工具在打包時(shí)對(duì)沒(méi)有用到API進(jìn)行剔除，最小化bundle體積；我們?cè)趍ain.js中就能發(fā)現(xiàn)這樣的變化：
//src/main.js import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; const app = createApp(App); app.use(router).mount("#app");
創(chuàng)建app實(shí)例方式從原來(lái)的new Vue()變?yōu)橥ㄟ^(guò)createApp函數(shù)進(jìn)行創(chuàng)建；不過(guò)一些核心的功能比如virtualDOM更新算法和響應(yīng)式系統(tǒng)無(wú)論如何都是會(huì)被打包的；這樣帶來(lái)的變化就是以前在全局配置的組件（Vue.component）、指令（Vue.directive）、混入（Vue.mixin）和插件（Vue.use）等變?yōu)橹苯訏燧d在實(shí)例上的方法；我們通過(guò)創(chuàng)建的實(shí)例來(lái)調(diào)用，帶來(lái)的好處就是一個(gè)應(yīng)用可以有多個(gè)Vue實(shí)例，不同實(shí)例之間的配置也不會(huì)相互影響：
const app = createApp(App) app.use(/* ... */) app.mixin(/* ... */) app.component(/* ... */) app.directive(/* ... */)
因此Vue2.x的以下全局API也需要改為ES6模塊化引入：
-
Vue.nextTick
-
Vue.observable不再支持，改為
reactive -
Vue.version
-
Vue.compile (僅全構(gòu)建)
-
Vue.set (僅兼容構(gòu)建)
-
Vue.delete (僅兼容構(gòu)建)
除此之外，vuex和vue-router也都使用了Tree-Shaking進(jìn)行了改進(jìn)，不過(guò)api的語(yǔ)法改動(dòng)不大：
//src/store/index.js import { createStore } from "vuex"; export default createStore({ state: {}, mutations: {}, actions: {}, modules: {}, }); //src/router/index.js import { createRouter, createWebHistory } from "vue-router"; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, });
生命周期函數(shù)
我們都知道，在Vue2.x中有8個(gè)生命周期函數(shù)：
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeDestroy
-
destroyed
在vue3中，新增了一個(gè)setup生命周期函數(shù)，setup執(zhí)行的時(shí)機(jī)是在beforeCreate生命函數(shù)之前執(zhí)行，因此在這個(gè)函數(shù)中是不能通過(guò)this來(lái)獲取實(shí)例的；同時(shí)為了命名的統(tǒng)一，將beforeDestroy改名為beforeUnmount，destroyed改名為unmounted，因此vue3有以下生命周期函數(shù)：
-
beforeCreate（建議使用setup代替）
-
created（建議使用setup代替）
-
setup
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeUnmount
-
unmounted
同時(shí)，vue3新增了生命周期鉤子，我們可以通過(guò)在生命周期函數(shù)前加on來(lái)訪(fǎng)問(wèn)組件的生命周期，我們可以使用以下生命周期鉤子：
-
onBeforeMount
-
onMounted
-
onBeforeUpdate
-
onUpdated
-
onBeforeUnmount
-
onUnmounted
-
onErrorCaptured
-
onRenderTracked
-
onRenderTriggered
那么這些鉤子函數(shù)如何來(lái)進(jìn)行調(diào)用呢？我們?cè)趕etup中掛載生命周期鉤子，當(dāng)執(zhí)行到對(duì)應(yīng)的生命周期時(shí)，就調(diào)用對(duì)應(yīng)的鉤子函數(shù)：
import { onBeforeMount, onMounted } from "vue"; export default { setup() { console.log("----setup----"); onBeforeMount(() => { // beforeMount代碼執(zhí)行 }); onMounted(() => { // mounted代碼執(zhí)行 }); }, }
新增的功能
說(shuō)完生命周期，下面就是我們期待的Vue3新增加的那些功能。
響應(yīng)式API
我們可以使用reactive來(lái)為JS對(duì)象創(chuàng)建響應(yīng)式狀態(tài)：
import { reactive, toRefs } from "vue"; const user = reactive({ name: 'Vue2', age: 18, }); user.name = 'Vue3'
reactive相當(dāng)于Vue2.x中的Vue.observable。
reactive函數(shù)只接收object和array等復(fù)雜數(shù)據(jù)類(lèi)型。
對(duì)于一些基本數(shù)據(jù)類(lèi)型，比如字符串和數(shù)值等，我們想要讓它變成響應(yīng)式，我們當(dāng)然也可以通過(guò)reactive函數(shù)創(chuàng)建對(duì)象的方式，但是Vue3提供了另一個(gè)函數(shù)ref：
import { ref } from "vue"; const num = ref(0); const str = ref(""); const male = ref(true); num.value++; console.log(num.value); str.value = "new val"; console.log(str.value); male.value = false; console.log(male.value);
ref返回的響應(yīng)式對(duì)象是只包含一個(gè)名為value參數(shù)的RefImpl對(duì)象，在js中獲取和修改都是通過(guò)它的value屬性；但是在模板中被渲染時(shí)，自動(dòng)展開(kāi)內(nèi)部的值，因此不需要在模板中追加.value。
<template> <p> <span>{{ count }}</span> <button @click="count ++">Increment count</button> </p> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) return { count } } } </script>
reactive主要負(fù)責(zé)復(fù)雜數(shù)據(jù)結(jié)構(gòu)，而ref主要處理基本數(shù)據(jù)結(jié)構(gòu)；但是很多童鞋就會(huì)誤解ref只能處理基本數(shù)據(jù)，ref本身也是能處理對(duì)象和數(shù)組的：
import { ref } from "vue"; const obj = ref({ name: "qwe", age: 1, }); setTimeout(() => { obj.value.name = "asd"; }, 1000); const list = ref([1, 2, 3, 4, 6]); setTimeout(() => { list.value.push(7); }, 2000);
當(dāng)我們處理一些大型響應(yīng)式對(duì)象的property時(shí)，我們很希望使用ES6的解構(gòu)來(lái)獲取我們想要的值：
let book = reactive({ name: 'Learn Vue', year: 2020, title: 'Chapter one' }) let { name, } = book name = 'new Learn' // Learn Vue console.log(book.name);
但是很遺憾，這樣會(huì)消除它的響應(yīng)式；對(duì)于這種情況，我們可以將響應(yīng)式對(duì)象轉(zhuǎn)換為一組ref，這些ref將保留與源對(duì)象的響應(yīng)式關(guān)聯(lián)：
let book = reactive({ name: 'Learn Vue', year: 2020, title: 'Chapter one' }) let { name, } = toRefs(book) // 注意這里解構(gòu)出來(lái)的name是ref對(duì)象 // 需要通過(guò)value來(lái)取值賦值 name.value = 'new Learn' // new Learn console.log(book.name);
對(duì)于一些只讀數(shù)據(jù)，我們希望防止它發(fā)生任何改變，可以通過(guò)readonly來(lái)創(chuàng)建一個(gè)只讀的對(duì)象：
import { reactive, readonly } from "vue"; let book = reactive({ name: 'Learn Vue', year: 2020, title: 'Chapter one' }) const copy = readonly(book); //Set operation on key "name" failed: target is readonly. copy.name = "new copy";
有時(shí)我們需要的值依賴(lài)于其他值的狀態(tài)，在vue2.x中我們使用computed函數(shù)來(lái)進(jìn)行計(jì)算屬性，在vue3中將computed功能進(jìn)行了抽離，它接受一個(gè)getter函數(shù)，并為getter返回的值創(chuàng)建了一個(gè)不可變的響應(yīng)式ref對(duì)象：
const num = ref(0); const double = computed(() => num.value * 2); num.value++; // 2 console.log(double.value); // Warning: computed value is readonly double.value = 4
或者我們也可以使用get和set函數(shù)創(chuàng)建一個(gè)可讀寫(xiě)的ref對(duì)象：
const num = ref(0); const double = computed({ get: () => num.value * 2, set: (val) => (num.value = val / 2), }); num.value++; // 2 console.log(double.value); double.value = 8 // 4 console.log(num.value);
響應(yīng)式偵聽(tīng)
和computed相對(duì)應(yīng)的就是watch，computed是多對(duì)一的關(guān)系，而watch則是一對(duì)多的關(guān)系；vue3也提供了兩個(gè)函數(shù)來(lái)偵聽(tīng)數(shù)據(jù)源的變化：watch和watchEffect。
我們先來(lái)看下watch，它的用法和組件的watch選項(xiàng)用法完全相同，它需要監(jiān)聽(tīng)某個(gè)數(shù)據(jù)源，然后執(zhí)行具體的回調(diào)函數(shù)，我們首先看下它監(jiān)聽(tīng)單個(gè)數(shù)據(jù)源的用法：
import { reactive, ref, watch } from "vue"; const state = reactive({ count: 0, }); //偵聽(tīng)時(shí)返回值得getter函數(shù) watch( () => state.count, (count, prevCount) => { // 1 0 console.log(count, prevCount); } ); state.count++; const count = ref(0); //直接偵聽(tīng)ref watch(count, (count, prevCount) => { // 2 0 console.log(count, prevCount, "watch"); }); count.value = 2;
我們也可以把多個(gè)值放在一個(gè)數(shù)組中進(jìn)行偵聽(tīng)，最后的值也以數(shù)組形式返回：
const state = reactive({ count: 1, }); const count = ref(2); watch([() => state.count, count], (newVal, oldVal) => { //[3, 2] [1, 2] //[3, 4] [3, 2] console.log(newVal, oldVal); }); state.count = 3; count.value = 4;
如果我們來(lái)偵聽(tīng)一個(gè)深度嵌套的對(duì)象屬性變化時(shí)，需要設(shè)置deep:true：
const deepObj = reactive({ a: { b: { c: "hello", }, }, }); watch( () => deepObj, (val, old) => { // new hello new hello console.log(val.a.b.c, old.a.b.c); }, { deep: true } ); deepObj.a.b.c = "new hello";
最后的打印結(jié)果可以發(fā)現(xiàn)都是改變后的值，這是因?yàn)閭陕?tīng)一個(gè)響應(yīng)式對(duì)象始終返回該對(duì)象的引用，因此我們需要對(duì)值進(jìn)行深拷貝：
import _ from "lodash"; const deepObj = reactive({ a: { b: { c: "hello", }, }, }); watch( () => _.cloneDeep(deepObj), (val, old) => { // new hello hello console.log(val.a.b.c, old.a.b.c); }, { deep: true } ); deepObj.a.b.c = "new hello";
一般偵聽(tīng)都會(huì)在組件銷(xiāo)毀時(shí)自動(dòng)停止，但是有時(shí)候我們想在組件銷(xiāo)毀前手動(dòng)的方式進(jìn)行停止，可以調(diào)用watch返回的stop函數(shù)進(jìn)行停止：
const count = ref(0); const stop = watch(count, (count, prevCount) => { // 不執(zhí)行 console.log(count, prevCount); }); setTimeout(()=>{ count.value = 2; }, 1000); // 停止watch stop();
還有一個(gè)函數(shù)watchEffect也可以用來(lái)進(jìn)行偵聽(tīng)，但是都已經(jīng)有watch了，這個(gè)watchEffect和watch有什么區(qū)別呢？他們的用法主要有以下幾點(diǎn)不同：
-
watchEffect不需要手動(dòng)傳入依賴(lài)
-
每次初始化時(shí)watchEffect都會(huì)執(zhí)行一次回調(diào)函數(shù)來(lái)自動(dòng)獲取依賴(lài)
-
watchEffect無(wú)法獲取到原值，只能得到變化后的值
import { reactive, ref, watch, watchEffect } from "vue"; const count = ref(0); const state = reactive({ year: 2021, }); watchEffect(() => { console.log(count.value); console.log(state.year); }); setInterval(() => { count.value++; state.year++; }, 1000);
watchEffect會(huì)在頁(yè)面加載時(shí)自動(dòng)執(zhí)行一次，追蹤響應(yīng)式依賴(lài)；在加載后定時(shí)器每隔1s執(zhí)行時(shí)，watchEffect都會(huì)監(jiān)聽(tīng)到數(shù)據(jù)的變化自動(dòng)執(zhí)行，每次執(zhí)行都是獲取到變化后的值。
組合API
Composition API（組合API）也是Vue3中最重要的一個(gè)功能了，之前的2.x版本采用的是Options API（選項(xiàng)API），即官方定義好了寫(xiě)法：data、computed、methods，需要在哪里寫(xiě)就在哪里寫(xiě)，這樣帶來(lái)的問(wèn)題就是隨著功能增加，代碼也越來(lái)復(fù)雜，我們看代碼需要上下反復(fù)橫跳：
Composition API對(duì)比
上圖中，一種顏色代表一個(gè)功能，我們可以看到
Options API的功能代碼比較分散；Composition API則可以將同一個(gè)功能的邏輯，組織在一個(gè)函數(shù)內(nèi)部，利于維護(hù)。
我們首先來(lái)看下之前Options API的寫(xiě)法：
export default { components: {}, data() {}, computed: {}, watch: {}, mounted() {}, }
Options API就是將同一類(lèi)型的東西放在同一個(gè)選項(xiàng)中，當(dāng)我們的數(shù)據(jù)比較少的時(shí)候，這樣的組織方式是比較清晰的；但是隨著數(shù)據(jù)增多，我們維護(hù)的功能點(diǎn)會(huì)涉及到多個(gè)data和methods，但是我們無(wú)法感知哪些data和methods是需要涉及到的，經(jīng)常需要來(lái)回切換查找，甚至是需要理解其他功能的邏輯，這也導(dǎo)致了組件難以理解和閱讀。
而Composition API做的就是把同一功能的代碼放到一起維護(hù)，這樣我們需要維護(hù)一個(gè)功能點(diǎn)的時(shí)候，不用去關(guān)心其他的邏輯，只關(guān)注當(dāng)前的功能；Composition API通過(guò)setup選項(xiàng)來(lái)組織代碼：
export default { setup(props, context) {} };
我們看到這里它接收了兩個(gè)參數(shù)props和context，props就是父組件傳入的一些數(shù)據(jù)，context是一個(gè)上下文對(duì)象，是從2.x暴露出來(lái)的一些屬性：
-
attrs
-
slots
-
emit
注：props的數(shù)據(jù)也需要通過(guò)toRefs解構(gòu)，否則響應(yīng)式數(shù)據(jù)會(huì)失效。
我們通過(guò)一個(gè)Button按鈕來(lái)看下setup具體的用法：
舉個(gè)栗子
<template> <p>{{ state.count }} * 2 = {{ double }}</p> <p>{{ num }}</p> <p @click="add">Add</p> </template> <script> import { reactive, computed, ref } from "vue"; export default { name: "Button", setup() { const state = reactive({ count: 1, }); const num = ref(2); function add() { state.count++; num.value += 10; } const double = computed(() => state.count * 2); return { state, double, num, add, }; }, }; </script>
很多童鞋可能就有疑惑了，這跟我在data和methods中寫(xiě)沒(méi)什么區(qū)別么，不就是把他們放到一起么？我們可以將setup中的功能進(jìn)行提取分割成一個(gè)一個(gè)獨(dú)立函數(shù)，每個(gè)函數(shù)還可以在不同的組件中進(jìn)行邏輯復(fù)用：
export default { setup() { const { networkState } = useNetworkState(); const { user } = userDeatil(); const { list } = tableData(); return { networkState, user, list, }; }, }; function useNetworkState() {} function userDeatil() {} function tableData() {}
Fragment
所謂的Fragment，就是片段；在vue2.x中，要求每個(gè)模板必須有一個(gè)根節(jié)點(diǎn)，所以我們代碼要這樣寫(xiě)：
<template> <p> <span></span> <span></span> </p> </template>
或者在Vue2.x中還可以引入vue-fragments庫(kù)，用一個(gè)虛擬的fragment代替p；在React中，解決方法是通過(guò)的一個(gè)React.Fragment標(biāo)簽創(chuàng)建一個(gè)虛擬元素；在Vue3中我們可以直接不需要根節(jié)點(diǎn)：
<template> <span>hello</span> <span>world</span> </template>
這樣就少了很多沒(méi)有意義的p元素。
Teleport
Teleport翻譯過(guò)來(lái)就是傳送、遠(yuǎn)距離傳送的意思；顧名思義，它可以將插槽中的元素或者組件傳送到頁(yè)面的其他位置：
傳送門(mén)游戲
在React中可以通過(guò)createPortal函數(shù)來(lái)創(chuàng)建需要傳送的節(jié)點(diǎn)；本來(lái)尤大大想起名叫Portal，但是H5原生的Portal標(biāo)簽也在計(jì)劃中，雖然有一些安全問(wèn)題，但是為了避免重名，因此改成Teleport。
Teleport一個(gè)常見(jiàn)的使用場(chǎng)景，就是在一些嵌套比較深的組件來(lái)轉(zhuǎn)移模態(tài)框的位置。雖然在邏輯上模態(tài)框是屬于該組件的，但是在樣式和DOM結(jié)構(gòu)上，嵌套層級(jí)后較深后不利于進(jìn)行維護(hù)（z-index等問(wèn)題）；因此我們需要將其進(jìn)行剝離出來(lái)：
<template> <button @click="showDialog = true">打開(kāi)模態(tài)框</button> <teleport to="body"> <p class="modal" v-if="showDialog" style="position: fixed"> 我是一個(gè)模態(tài)框 <button @click="showDialog = false">關(guān)閉</button> <child-component :msg="msg"></child-component> </p> </teleport> </template> <script> export default { data() { return { showDialog: false, msg: "hello" }; }, }; </script>
這里的Teleport中的modal p就被傳送到了body的底部；雖然在不同的地方進(jìn)行渲染，但是Teleport中的元素和組件還是屬于父組件的邏輯子組件，還是可以和父組件進(jìn)行數(shù)據(jù)通信。Teleport接收兩個(gè)參數(shù)to和disabled：
-
to – string：必須是有效的查詢(xún)選擇器或 HTMLElement，可以id或者class選擇器等。
-
disabled – boolean：如果是true表示禁用teleport的功能，其插槽內(nèi)容將不會(huì)移動(dòng)到任何位置，默認(rèn)false不禁用。
Suspense
Suspense是Vue3推出的一個(gè)內(nèi)置組件，它允許我們的程序在等待異步組件時(shí)渲染一些后備的內(nèi)容，可以讓我們創(chuàng)建一個(gè)平滑的用戶(hù)體驗(yàn)；Vue中加載異步組件其實(shí)在Vue2.x中已經(jīng)有了，我們用的vue-router中加載的路由組件其實(shí)也是一個(gè)異步組件：
export default { name: "Home", components: { AsyncButton: () => import("../components/AsyncButton"), }, }
在Vue3中重新定義，異步組件需要通過(guò)defineAsyncComponent來(lái)進(jìn)行顯示的定義：
// 全局定義異步組件 //src/main.js import { defineAsyncComponent } from "vue"; const AsyncButton = defineAsyncComponent(() => import("./components/AsyncButton.vue") ); app.component("AsyncButton", AsyncButton); // 組件內(nèi)定義異步組件 // src/views/Home.vue import { defineAsyncComponent } from "vue"; export default { components: { AsyncButton: defineAsyncComponent(() => import("../components/AsyncButton") ), }, };
同時(shí)對(duì)異步組件的可以進(jìn)行更精細(xì)的管理：
export default { components: { AsyncButton: defineAsyncComponent({ delay: 100, timeout: 3000, loader: () => import("../components/AsyncButton"), errorComponent: ErrorComponent, onError(error, retry, fail, attempts) { if (attempts <= 3) { retry(); } else { fail(); } }, }), }, };
這樣我們對(duì)異步組件加載情況就能掌控，在加載失敗也能重新加載或者展示異常的狀態(tài)：
異步組件加載失敗
我們回到Suspense，上面說(shuō)到它主要是在組件加載時(shí)渲染一些后備的內(nèi)容，它提供了兩個(gè)slot插槽，一個(gè)default默認(rèn)，一個(gè)fallback加載中的狀態(tài)：
<template> <p> <button @click="showButton">展示異步組件</button> <template v-if="isShowButton"> <Suspense> <template #default> <AsyncButton></AsyncButton> </template> <template #fallback> <p>組件加載中...</p> </template> </Suspense> </template> </p> </template> <script> export default { setup() { const isShowButton = ref(false); function showButton() { isShowButton.value = true; } return { isShowButton, showButton, }; }, } </script>
異步組件加載顯示占位
非兼容的功能
非兼容的功能主要是一些和Vue2.x版本改動(dòng)較大的語(yǔ)法，已經(jīng)在Vue3上可能存在兼容問(wèn)題了。
data、mixin和filter
在Vue2.x中，我們可以定義data為object或者function，但是我們知道在組件中如果data是object的話(huà)會(huì)出現(xiàn)數(shù)據(jù)互相影響，因?yàn)閛bject是引用數(shù)據(jù)類(lèi)型；
在Vue3中，data只接受function類(lèi)型，通過(guò)function返回對(duì)象；同時(shí)Mixin的合并行為也發(fā)生了改變，當(dāng)mixin和基類(lèi)中data合并時(shí)，會(huì)執(zhí)行淺拷貝合并：
const Mixin = { data() { return { user: { name: 'Jack', id: 1, address: { prov: 2, city: 3, }, } } } } const Component = { mixins: [Mixin], data() { return { user: { id: 2, address: { prov: 4, }, } } } } // vue2結(jié)果： { id: 2, name: 'Jack', address: { prov: 4, city: 3 } } // vue3結(jié)果： user: { id: 2, address: { prov: 4, }, }
我們看到最后合并的結(jié)果，vue2.x會(huì)進(jìn)行深拷貝，對(duì)data中的數(shù)據(jù)向下深入合并拷貝；而vue3只進(jìn)行淺層拷貝，對(duì)data中數(shù)據(jù)發(fā)現(xiàn)已存在就不合并拷貝。
在vue2.x中，我們還可以通過(guò)過(guò)濾器filter來(lái)處理一些文本內(nèi)容的展示：
<template> <p>{{ status | statusText }}</p> </template> <script> export default { props: { status: { type: Number, default: 1 } }, filters: { statusText(value){ if(value === 1){ return '訂單未下單' } else if(value === 2){ return '訂單待支付' } else if(value === 3){ return '訂單已完成' } } } } </script>
最常見(jiàn)的就是處理一些訂單的文案展示等；然而在vue3中，過(guò)濾器filter已經(jīng)刪除，不再支持了，官方建議使用方法調(diào)用或者計(jì)算屬性computed來(lái)進(jìn)行代替。
v-model
在Vue2.x中，v-model相當(dāng)于綁定value屬性和input事件，它本質(zhì)也是一個(gè)語(yǔ)法糖：
<child-component v-model="msg"></child-component> <!-- 相當(dāng)于 --> <child-component :value="msg" @input="msg=$event"></child-component>
在某些情況下我們需要對(duì)多個(gè)值進(jìn)行雙向綁定，其他的值就需要顯示的使用回調(diào)函數(shù)來(lái)改變了：
<child-component v-model="msg" :msg1="msg1" @change1="msg1=$event" :msg2="msg2" @change2="msg2=$event"> </child-component>
在vue2.3.0+版本引入了.sync修飾符，其本質(zhì)也是語(yǔ)法糖，是在組件上綁定@update:propName回調(diào)，語(yǔ)法更簡(jiǎn)潔：
<child-component :msg1.sync="msg1" :msg2.sync="msg2"> </child-component> <!-- 相當(dāng)于 --> <child-component :msg1="msg1" @update:msg1="msg1=$event" :msg2="msg2" @update:msg2="msg2=$event"> </child-component>
Vue3中將v-model和.sync進(jìn)行了功能的整合，拋棄了.sync，表示：多個(gè)雙向綁定value值直接用多個(gè)v-model傳就好了；同時(shí)也將v-model默認(rèn)傳的prop名稱(chēng)由value改成了modelValue：
<child-component v-model="msg"> </child-component> <!-- 相當(dāng)于 --> <child-component :modelValue="msg" @update:modelValue="msg = $event"> </child-component>
如果我們想通過(guò)v-model傳遞多個(gè)值，可以將一個(gè)argument傳遞給v-model：
<child-component v-model.msg1="msg1" v-model.msg2="msg2"> </child-component> <!-- 相當(dāng)于 --> <child-component :msg1="msg1" @update:msg1="msg1=$event" :msg2="msg2" @update:msg2="msg2=$event"> </child-component>
v-for和key
在Vue2.x中，我們都知道v-for每次循環(huán)都需要給每個(gè)子節(jié)點(diǎn)一個(gè)唯一的key，還不能綁定在template標(biāo)簽上，
<template v-for="item in list"> <p :key="item.id">...</p> <span :key="item.id">...</span> </template>
而在Vue3中，key值應(yīng)該被放置在template標(biāo)簽上，這樣我們就不用為每個(gè)子節(jié)點(diǎn)設(shè)一遍：
<template v-for="item in list" :key="item.id"> <p>...</p> <span>...</span> </template>
v-bind合并
在vue2.x中，如果一個(gè)元素同時(shí)定義了v-bind="object"和一個(gè)相同的單獨(dú)的屬性，那么這個(gè)單獨(dú)的屬性會(huì)覆蓋object中的綁定：
<p id="red" v-bind="{ id: 'blue' }"></p> <p v-bind="{ id: 'blue' }" id="red"></p> <!-- 最后結(jié)果都相同 --> <p id="red"></p>
然而在vue3中，如果一個(gè)元素同時(shí)定義了v-bind="object"和一個(gè)相同的單獨(dú)的屬性，那么聲明綁定的順序決定了最后的結(jié)果（后者覆蓋前者）：
<!-- template --> <p id="red" v-bind="{ id: 'blue' }"></p> <!-- result --> <p id="blue"></p> <!-- template --> <p v-bind="{ id: 'blue' }" id="red"></p> <!-- result --> <p id="red"></p>
v-for中ref
vue2.x中，在v-for上使用ref屬性，通過(guò)this.$refs會(huì)得到一個(gè)數(shù)組：
<template <p v-for="item in list" :ref="setItemRef"></p> </template> <script> export default { data(){ list: [1, 2] }, mounted () { // [p, p] console.log(this.$refs.setItemRef) } } </script>
但是這樣可能不是我們想要的結(jié)果；因此vue3不再自動(dòng)創(chuàng)建數(shù)組，而是將ref的處理方式變?yōu)榱撕瘮?shù)，該函數(shù)默認(rèn)傳入該節(jié)點(diǎn)：
<template <p v-for="item in 3" :ref="setItemRef"></p> </template> <script> import { reactive, onUpdated } from 'vue' export default { setup() { let itemRefs = reactive([]) const setItemRef = el => { itemRefs.push(el) } onUpdated(() => { console.log(itemRefs) }) return { itemRefs, setItemRef } } } </script>
v-for和v-if優(yōu)先級(jí)
在vue2.x中，在一個(gè)元素上同時(shí)使用v-for和v-if，v-for有更高的優(yōu)先級(jí)，因此在vue2.x中做性能優(yōu)化，有一個(gè)重要的點(diǎn)就是v-for和v-if不能放在同一個(gè)元素上。
而在vue3中，v-if比v-for有更高的優(yōu)先級(jí)。因此下面的代碼，在vue2.x中能正常運(yùn)行，但是在vue3中v-if生效時(shí)并沒(méi)有item變量，因此會(huì)報(bào)錯(cuò)：
<template> <p v-for="item in list" v-if="item % 2 === 0" :key="item">{{ item }}</p> </template> <script> export default { data() { return { list: [1, 2, 3, 4, 5], }; }, }; </script>
總結(jié)
