當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue 3.1.0 的 beta 版发布

發(fā)布時(shí)間：2023/12/9 vue 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 3.1.0 的 beta 版发布小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

大家好，我是若川（點(diǎn)這里加我微信?ruochuan12，長(zhǎng)期交流學(xué)習(xí)）。昨晚尤大視頻號(hào)直播說(shuō)到vue 3.1.0 beta版發(fā)布了，今天分享這篇文章。也有小伙伴可能注意到了昨晚我一直在送禮物。

點(diǎn)擊下方卡片關(guān)注我、加個(gè)星標(biāo)，或者查看源碼等系列文章。學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列

以往都是純翻譯發(fā)給大家，這次換個(gè)形式為大家介紹。

編輯 |?KnowsCount

? ? ? ? ?QC-L

本次 beta 版本帶來(lái)了一些有趣的新特性和錯(cuò)誤修復(fù)。

新特性

onServerPrefetch：composition-api 版本的 serverPrefetch
組件級(jí)別的 compilerOptions
@vue/compiler-core 支持了空白字符處理策略
支持通過(guò) app.config.compilerOptions 配置運(yùn)行時(shí)的編譯器
devtools 改進(jìn)了對(duì) KeepAlive 的支持
支持通過(guò) is="vue:xxx" 將普通元素轉(zhuǎn)換為組件

onServerPrefetch

具體請(qǐng)參見(jiàn) PR 3070^[1] 和 PR 2902^[2]

此特性主要解決在 composition-api 情況下沒(méi)有提供 serverPrefetch 生命周期鉤子函數(shù)的問(wèn)題。

這個(gè)鉤子函數(shù)名為 onServerPrefetch。

如果你也這方面的需求，可以嘗試升級(jí)至 3.1.0-beta 版

相關(guān)討論:

vue-apollo^[3]
app-extension-apollo^[4]

@vue/complier-core 支持了空白字符處理策略

具體內(nèi)容請(qǐng)參閱 PR 1600^[5] 和 v2 原有效果^[6]。

應(yīng)用

我們來(lái)測(cè)試下此策略：

先裝個(gè) beta 版本的 @vue/compiler-core

yarn?add?@vue/compiler-core@beta

新建 index.js 文件

const?core?=?require('@vue/compiler-core')const?{?baseCompile:?complie?}?=?coreconst?{?ast?}?=?complie(`??????foo?\n?bar?baz??????`,?{whitespace:?'preserve'?//?condense })console.log(ast.children[0]) console.log(ast.children[0].content)

大概效果如示例所示：

foo?\n?bar?baz?????foo?\n?bar?baz?????foo?bar?baz?

源碼

原本只在 compiler-core 的 parse 文件中的 defaultParserOptions 提供了默認(rèn)的 condense 情況

whitespace:?'condense'

在 compiler-core 的 options 文件中新增了 whitespace：

whitespace?:?'preserve'?|?'condense'

相關(guān)鏈接：

PR 1600^[7]
stackoverflow^[8]
vue 2.0/compiler^[9]
vue 2.0 的 `whitespace`^[10]
vue 2.0 的 PR^[11]

通過(guò) is="vue:xxx" 支持普通元素的轉(zhuǎn)換

這條特性的更新，從源碼上看，兼容了兩種類(lèi)型。

棄用的 v-is 指令

is="vue:xxx" 的屬性

源碼

let?{?tag?}?=?node//?1.?動(dòng)態(tài)組件 const?isExplicitDynamic?=?isComponentTag(tag) const?isProp?=findProp(node,?'is')?||?(!isExplicitDynamic?&&?findDir(node,?'is')) if?(isProp)?{if?(!isExplicitDynamic?&&?isProp.type?===?NodeTypes.ATTRIBUTE)?{//?<button?is="vue:xxx">//?如果不是?<component>，僅僅是?"vue:"?開(kāi)頭//?在解析階段會(huì)被視為組件，并在此處進(jìn)行//?tag?被重新賦值為?"vue:"?以后的內(nèi)容tag?=?isProp.value!.content.slice(4)}?else?{const?exp?=isProp.type?===?NodeTypes.ATTRIBUTE??isProp.value?&&?createSimpleExpression(isProp.value.content,?true):?isProp.expif?(exp)?{return?createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT),?[exp])}} } //?當(dāng)?tag?為?<component>，或者?is="vue:xxx"，跳過(guò)后續(xù)處理 if?(name?===?'is'?&&(isComponentTag(tag)?||?(value?&&?value.content.startsWith('vue:'))) )?{continue } //?...

上述代碼中有幾個(gè)點(diǎn)：

首先 isComponentTag，用以判斷是否為動(dòng)態(tài)組件：

//?此方法用于判斷是否為動(dòng)態(tài)組件 function?isComponentTag(tag:?string)?{return?tag[0].toLowerCase()?+?tag.slice(1)?===?'component' }

查找是否含有 is 屬性

//?先查屬性 findProp(node,?'is') //?否則判斷是不是動(dòng)態(tài)組件，如果不是，判斷是不是指令 !isExplicitDynamic?&&?findDir(node,?'is')

其主要原因是，兩者的 AST 結(jié)構(gòu)不同。

相關(guān)鏈接：

Support casting plain element^[12]
Custom Elements Interop^[13]

附上 ChangeLog

Bug 修復(fù)

兼容： 處理并針對(duì) config.optionMergeStrategies 實(shí)現(xiàn)告警 (94e69fd^[14])
compiler-core: 當(dāng)注釋選項(xiàng)啟用時(shí)，在生產(chǎn)環(huán)境下將保留注釋 (e486254^[15])
hmr: 禁止從組件類(lèi)型中移除 __file 的 key 值 (9db3cbb^[16])
hydration: 修復(fù) asnyc 組件 hydrated 前的更新 (#3563^[17]) (c8d9683^[18]), closes #3560^[19]
reactivity: 修復(fù) readonly + reactive Map 的追溯 (#3604^[20]) (5036c51^[21]), closes #3602^[22]
runtime-core: 確保聲明 props 的 key 永遠(yuǎn)存在 (4fe4de0^[23]), closes #3288^[24]
runtime-core:?computed 監(jiān)聽(tīng)多個(gè) source?(#3066^[25]) (e7300eb^[26]), closes #3068^[27]
Teleport: 避免改變對(duì) vnode.dynamicChildren 的引用 (#3642^[28]) (43f7815^[29]), closes #3641^[30]
watch: 避免遍歷 non-plain 對(duì)象 (62b8f4a^[31])
watch: this.$watch 應(yīng)該支持監(jiān)聽(tīng)鍵路徑 (870f2a7^[32])

特性

onServerPrefetch (#3070^[33]) (349eb0f^[34])
運(yùn)行時(shí)編譯器支持了組件級(jí) compilerOptions (ce0bbe0^[35])
compiler-core: whitespace 處理策略 (dee3d6a^[36])
config: 利用 app.config.compilerOptions 支持配置運(yùn)行時(shí)編譯器 (091e6d6^[37])
devtools: 升級(jí)對(duì) KeepAlive 的支持 (03ae300^[38])
支持利用 is="vue:xxx" 將 plain 元素 cast 到組件 (af9e699^[39])

性能提升

僅當(dāng)實(shí)際改變時(shí)才會(huì)觸發(fā) $attrs 的更新 (5566d39^[40])
compiler: 解析結(jié)束標(biāo)簽時(shí)跳過(guò)不必要的檢查 (048ac29^[41])

參考資料

[1]

PR 3070: https://github.com/vuejs/vue-next/pull/3070

[2]

PR 2902: https://github.com/vuejs/vue-next/pull/2902

[3]

vue-apollo: https://github.com/vuejs/vue-apollo/issues/1102

[4]

其余參考資料省略，可以點(diǎn)擊閱讀原文查看。

最近組建了一個(gè)江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進(jìn)群。

·················?若川出品?·················

今日話題

昨晚尤大在視頻號(hào)直播，估計(jì)挺多人看到直播了。估計(jì)看到直播的還是小部分，大部分還是不知道有這個(gè)直播。我一直在刷禮物，也是第一次看視頻號(hào)刷禮物，我也不太懂視頻號(hào)的玩法。后來(lái)才發(fā)現(xiàn)可以鏈接到視頻號(hào)，還可以關(guān)聯(lián)公眾號(hào)，說(shuō)不定還能漲幾個(gè)粉。但我用的是第二個(gè)號(hào)沒(méi)有視頻號(hào)關(guān)聯(lián)。平時(shí)知道有這個(gè)東西，但真正用起來(lái)又顯得有點(diǎn)棘手。歡迎在下方留言~? 歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

一個(gè)愿景是幫助5年內(nèi)前端人走向前列的公眾號(hào)

可加我個(gè)人微信?ruochuan12，長(zhǎng)期交流學(xué)習(xí)

總結(jié)

以上是生活随笔為你收集整理的Vue 3.1.0 的 beta 版发布的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Vue
Beta

上一篇： stc15f2k60f2单片机定时器_S
下一篇：据说 99% 的人不知道 vue-dev