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

vue

Vue 3.1.0 的 beta 版发布

發(fā)布時間：2023/12/9 vue 35 豆豆

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

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

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

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

編輯 |?KnowsCount

? ? ? ? ?QC-L

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

新特性

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

onServerPrefetch

具體請參見 PR 3070^[1] 和 PR 2902^[2]

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

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

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

相關(guān)討論:

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

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

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

應(yīng)用

我們來測試下此策略：

先裝個 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]

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

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

棄用的 v-is 指令

is="vue:xxx" 的屬性

源碼

let?{?tag?}?=?node//?1.?動態(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:"?開頭//?在解析階段會被視為組件，并在此處進(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"，跳過后續(xù)處理 if?(name?===?'is'?&&(isComponentTag(tag)?||?(value?&&?value.content.startsWith('vue:'))) )?{continue } //?...

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

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

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

查找是否含有 is 屬性

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

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

相關(guān)鏈接：

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

附上 ChangeLog

Bug 修復(fù)

兼容： 處理并針對 config.optionMergeStrategies 實(shí)現(xiàn)告警 (94e69fd^[14])
compiler-core: 當(dāng)注釋選項(xiàng)啟用時，在生產(chǎn)環(huán)境下將保留注釋 (e486254^[15])
hmr: 禁止從組件類型中移除 __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)聽多個 source?(#3066^[25]) (e7300eb^[26]), closes #3068^[27]
Teleport: 避免改變對 vnode.dynamicChildren 的引用 (#3642^[28]) (43f7815^[29]), closes #3641^[30]
watch: 避免遍歷 non-plain 對象 (62b8f4a^[31])
watch: this.$watch 應(yīng)該支持監(jiān)聽鍵路徑 (870f2a7^[32])

特性

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

性能提升

僅當(dāng)實(shí)際改變時才會觸發(fā) $attrs 的更新 (5566d39^[40])
compiler: 解析結(jié)束標(biāo)簽時跳過不必要的檢查 (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)擊閱讀原文查看。

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

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

今日話題

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

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

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

總結(jié)

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

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

Vue
Beta

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