1. 雙向數(shù)據(jù)綁定原理發(fā)生了改變

vue2的雙向數(shù)據(jù)綁定是利用了es5 的一個(gè)API Object.definepropert() 對(duì)數(shù)據(jù)進(jìn)行劫持 結(jié)合發(fā)布訂閱模式來(lái)實(shí)現(xiàn)的。vue3中使用了es6的proxyAPI對(duì)數(shù)據(jù)進(jìn)行處理。
相比與vue2，使用proxy API 優(yōu)勢(shì)有：defineProperty只能監(jiān)聽(tīng)某個(gè)屬性，不能對(duì)全對(duì)象進(jìn)行監(jiān)聽(tīng)；可以省去for in 、閉包等內(nèi)容來(lái)提升效率（直接綁定整個(gè)對(duì)象即可）；可以監(jiān)聽(tīng)數(shù)組，不用再去單獨(dú)的對(duì)數(shù)組做特異性操作，vue3可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化。

2.Vue3支持碎片（Fragments）

vue2中必須要有根標(biāo)簽
vue3中可以沒(méi)有根標(biāo)簽，會(huì)默認(rèn)將多個(gè)根標(biāo)簽包裹在一個(gè)fragement虛擬標(biāo)簽中，有利于減少內(nèi)存。
就是說(shuō)在組件可以擁有多個(gè)根節(jié)點(diǎn)。
vue2

<template>
? <div class='form-element'>
? ? ? <h2> {{ title }} </h2>
? </div>
</template>
vue3

<template>
? <div class='form-element'>
? </div>
? <h2> {{ title }} </h2>
</template>

3.v-if和v-for的優(yōu)先級(jí)

在vue2中v-for的優(yōu)先級(jí)高于v-if，可以放在一起使用，但是不建議這么做，會(huì)帶來(lái)性能上的浪費(fèi)
在vue3中v-if的優(yōu)先級(jí)高于v-for，一起使用會(huì)報(bào)錯(cuò)?？梢酝ㄟ^(guò)在外部添加一個(gè)標(biāo)簽，將v-for移到外層.

4.key在template和v-if上的使用

vue2中：在使用v-if、vi-else、v-else-if時(shí)，為了保證dom節(jié)點(diǎn)渲染的正確性，通常需要在對(duì)應(yīng)的節(jié)點(diǎn)添加不同的key，以確保vue在進(jìn)行虛擬dom對(duì)比時(shí)是準(zhǔn)確的；vue2中template在v-for循環(huán)時(shí)是不能設(shè)置key的，否則會(huì)產(chǎn)生警告（需要給子節(jié)點(diǎn)設(shè)置key）。
vue3中：在使用v-if、vi-else、v-else-if時(shí)，不用提供唯一的key對(duì)dom節(jié)點(diǎn)進(jìn)行區(qū)分，因?yàn)関ue內(nèi)部會(huì)自動(dòng)生成唯一的key，如果你提供了key，那你就要保證它的唯一性；vue3中template在v-for循環(huán)時(shí)，key應(yīng)該設(shè)置在template標(biāo)簽上

5.$listeners被移除

vue2中：使用$attrs訪問(wèn)傳遞給組件的屬性，使用$listeners訪問(wèn)傳遞給組件的事件（需要結(jié)合inheritAttrs:false）。
vue3中：虛擬dom中，事件監(jiān)聽(tīng)器僅僅是以on為前綴的屬性

6.Teleport

允許我們將指定內(nèi)容渲染在指定的html標(biāo)簽上
Teleport一般被翻譯成瞬間移動(dòng)組件,實(shí)際上是不好理解的.我把他理解成"獨(dú)立組件",
他可以那你寫(xiě)的組件掛載到任何你想掛載的DOM上,所以是很自由很獨(dú)立的

7. Composition API

組合式API和選項(xiàng)式API
在vue2中采用選項(xiàng)式API，將數(shù)據(jù)和函數(shù)集中起來(lái)處理，將功能點(diǎn)切割了當(dāng)邏輯復(fù)雜的時(shí)候不利于代碼閱讀。
在vue3中采用組合式API，將同一個(gè)功能的代碼集中起來(lái)處理，使得代碼更加有序，有利于代碼的書(shū)寫(xiě)和維護(hù)，更加簡(jiǎn)便和整潔

8.sync修飾符

vue2中：由于vue中是單向數(shù)據(jù)流，父子組件在傳值時(shí)想要實(shí)現(xiàn)v-model的效果就要用到.sync修飾符來(lái)實(shí)現(xiàn)“雙向綁定”
vue3中：對(duì)v-model進(jìn)行了改造，不再需要 .sync 修飾符即可達(dá)到數(shù)據(jù)雙向綁定的效果。在vue3中支持多個(gè) v-model屬性，默認(rèn)使用 modelValue 作為 prop，update:modelValue作為事件，當(dāng)多個(gè)v-model綁定時(shí)，書(shū)寫(xiě)為例：v-model:title="title"，此時(shí) title 作為prop，update:title 作為事件

9.全局API

vue2中：有許多的全局API，如：Vue.directive、Vue.component、Vue.config、Vue.mixin等
vue3中：提供的是實(shí)例API，通過(guò)createApp創(chuàng)建vue實(shí)例，原來(lái)在Vue原型上的API都被掛載到了vue實(shí)例上，如：app.directive、app.component、app.config、app.mixin等

10.Vue.prototype 替換為 config.globalProperties

vue2中：綁定全局的變量、方法等：Vue.prototype.$ajax = xxxx
vue3中：const app = createApp({}); app.config.globalProperties.$ajax = xxxx

11. 建立數(shù)據(jù)data

vue2是把數(shù)據(jù)放入data中，vue3就需要使用一個(gè)新的setup()方法，此方法在組件初始化構(gòu)造得時(shí)候觸發(fā)。使用一下三個(gè)步驟來(lái)簡(jiǎn)=建立反應(yīng)性數(shù)據(jù)： 1. 從vue引入reactive；使用reactive() 方法來(lái)聲明數(shù)據(jù)為響應(yīng)性數(shù)據(jù)；3. 使用setup()方法來(lái)返回我們得響應(yīng)性數(shù)據(jù)，從而template可以獲取這些響應(yīng)性數(shù)據(jù)。

12.生命周期

vue2 ? ? --------------- vue3
beforeCreate ? ? ? ? ? ? ? ? ? ? ? ? -> ? setup()
Created ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -> ? setup()
beforeMount ? ? ? ? ? ? ? ? ? ? ? ? ?-> ? onBeforeMount
mounted ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-> ? ?onMounted
beforeUpdate ? ? ? ? ? ? ? ? ? ? ? ?-> ? ?onBeforeUpdate
updated ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -> ? ?onUpdated
beforeDestroyed ? ? ? ? ? ? ? ? ? ?-> ? ?onBeforeUnmount
destroyed ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-> ? ? onUnmounted
activated ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-> ? ? onActivated
deactivated ? ? ? ? ? ? ? ? ? ? ? ? ? ?-> ? ? onDeactivated

13.this

vue2中：無(wú)時(shí)無(wú)刻都要使用this
vue3中：因?yàn)閟etup函數(shù)的存在，所有的props、data等都不需要用this進(jìn)行訪問(wèn)（vue3對(duì)vue2絕大多數(shù)是兼容的，如果你用了vue2相關(guān)的東西，那你還是需要像vue2一樣書(shū)寫(xiě)）

13.typescript支持

vue2中：默認(rèn)是不支持typescript的。
vue3中：支持使用typescript，使用typescript在構(gòu)建大型項(xiàng)目時(shí)，能夠很好的提高項(xiàng)目開(kāi)發(fā)的質(zhì)量。

14. 父子傳參不同，setup()函數(shù)特性

setup()函數(shù)接收兩個(gè)參數(shù)：props、context(包含attrs、slots、emit)
setup函數(shù)是處于生命周期beforeCreated和created倆個(gè)鉤子函數(shù)之前
執(zhí)行setup時(shí)，組件實(shí)例尚未被創(chuàng)建（在setup()內(nèi)部，this不會(huì)是該活躍實(shí)例得引用，即不指向vue實(shí)例，Vue為了避免我們錯(cuò)誤得使用，直接將setup函數(shù)中得this修改成了undefined）
與模板一起使用時(shí)，需要返回一個(gè)對(duì)象
因?yàn)閟etup函數(shù)中，props是響應(yīng)式得，當(dāng)傳入新的prop時(shí)，它將會(huì)被更新，所以不能使用es6解構(gòu)，因?yàn)樗鼤?huì)消除prop得響應(yīng)性，如需解構(gòu)prop，可以通過(guò)使用setup函數(shù)中得toRefs來(lái)完成此操作。
父?jìng)髯樱胮rops,子傳父用事件 Emitting Events。在vue2中，會(huì)調(diào)用this$emit然后傳入事件名和對(duì)象；在vue3中得setup()中得第二個(gè)參數(shù)content對(duì)象中就有emit，那么我們只要在setup()接收第二個(gè)參數(shù)中使用分解對(duì)象法取出emit就可以在setup方法中隨意使用了。
在setup()內(nèi)使用響應(yīng)式數(shù)據(jù)時(shí)，需要通過(guò) .value 獲取
import { ref } from 'vue'
const count = ref(0)
console.log(count.value)
從setup() 中返回得對(duì)象上得property 返回并可以在模板中被訪問(wèn)時(shí)，它將自動(dòng)展開(kāi)為內(nèi)部值。不需要在模板中追加.value。
setup函數(shù)只能是同步的不能是異步的。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-660365.html

到了這里，關(guān)于vue2和vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！