vue3.2 到底更新了什么？

根據(jù)原文內(nèi)容的更新的內(nèi)容主要有以下 5 塊：
1.SSR：服務(wù)端渲染優(yōu)化。@vue/server-renderer包加了一個(gè)ES模塊創(chuàng)建，
與Node.js解耦，使在非Node環(huán)境用@vue/serve-render做服務(wù)端渲染成為可能，
比如(Workers、Service?Workers)
2.New SFC Features：新的單文件組件特性
3.Web Components：自定義 web 組件。這個(gè)我們平時(shí)很少用到，但是應(yīng)該知道
4.Effect Scope API：effect 作用域，
用來直接控制響應(yīng)式副作用的釋放時(shí)間(computed 和 watchers)。
這是底層庫的更新，開發(fā)不用關(guān)心，但是應(yīng)該知道
5.Performance Improvements：性能提升。這是內(nèi)部的提升，跟開發(fā)無關(guān)
復(fù)制代碼

setup 的簡(jiǎn)單介紹

起初?Vue3.0?暴露變量必須?return?出來，template中才能使用；
這樣會(huì)導(dǎo)致在頁面上變量會(huì)出現(xiàn)很多次。
很不友好，vue3.2只需在script標(biāo)簽中添加setup。
可以幫助我們解決這個(gè)問題。

1.組件只需引入不用注冊(cè)，屬性和方法也不用返回，
也不用寫setup函數(shù)，也不用寫export?default?，
甚至是自定義指令也可以在我們的template中自動(dòng)獲得。
復(fù)制代碼

變量、方法不需要 return 出來

復(fù)制代碼

組件不需要在注冊(cè)

使用的頁面


復(fù)制代碼

分析引入 setup 后組件的變化

在?script?setup?中，
引入的組件可以直接使用無需再通過components進(jìn)行注冊(cè)，[是不是真的很香啊!]
并且無法指定當(dāng)前組件的名字，它會(huì)自動(dòng)以文件名為主，也就是不用再寫name屬性了。
當(dāng)我們的頁面上需要使用很多組件時(shí)，它的功能一下就體現(xiàn)出來了。
復(fù)制代碼

新增 defineProps

剛剛我一直在強(qiáng)調(diào),不需要使用setup函數(shù)，機(jī)智的小伙伴會(huì)說:
那么子組件怎么接受父組件傳遞過來的值呢?
props，emit怎么獲取呢?
別擔(dān)心,新的api出現(xiàn)了,我們的主角?defineProps
復(fù)制代碼

defineProps 的使用

父組件傳遞參數(shù)

復(fù)制代碼

子組件接受參數(shù)

復(fù)制代碼

子組件怎么向父組件拋出事件？defineEmits的到來！

子組件使用

別擔(dān)心，我們使用defineEmits。它可以像父組件拋出事件。



復(fù)制代碼

父組件

復(fù)制代碼

如何獲取子組件中的屬性值

子組件

復(fù)制代碼

父組件

復(fù)制代碼

新增指令 v-memo

v-memod會(huì)記住一個(gè)模板的子樹,元素和組件上都可以使用。
該指令接收一個(gè)固定長度的數(shù)組作為依賴值進(jìn)行[記憶比對(duì)]。
如果數(shù)組中的每個(gè)值都和上次渲染的時(shí)候相同，則整個(gè)子樹的更新會(huì)被跳過。
即使是虛擬 DOM 的 VNode 創(chuàng)建也將被跳過，因?yàn)樽訕涞挠洃浉北究梢员恢赜谩?br>因此渲染的速度會(huì)非常的快。
需要注意得是:正確地聲明記憶數(shù)組是很重要。
開發(fā)者有責(zé)任指定正確的依賴數(shù)組，以避免必要的更新被跳過。
"item?in?listArr"??:key="item.id"??v-memo="['valueA'，'valueB']">
????{{?item.name???}}

v-memod的指令使用較少，它的作用是:緩存模板中的一部分?jǐn)?shù)據(jù)。
只創(chuàng)建一次，以后就不會(huì)再更新了。也就是說用內(nèi)存換取時(shí)間。
復(fù)制代碼

style v-bind 該同學(xué)已經(jīng)從實(shí)驗(yàn)室畢業(yè)了

經(jīng)過尤大大和團(tuán)隊(duì)的努力，
復(fù)制代碼

尾聲

如果你覺得我寫的不錯(cuò)的話，點(diǎn)一下推薦。
我已經(jīng)幾個(gè)月沒有人給我推薦了。
聽說打賞的小哥哥都追到女朋友了，
咦！你不信，不信你給我打賞看一下！
保準(zhǔn)你追到到喜歡的Ta
復(fù)制代碼