Vue 3.1.0 的 beta 版發布

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

點擊下方卡片關注我、加個星標，或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列

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

編輯 |?KnowsCount

? ? ? ? ?QC-L

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

新特性

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

`onServerPrefetch`

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

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

這個鉤子函數名為 onServerPrefetch。

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

相關討論:

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

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

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

應用

我們來測試下此策略：

先裝個 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?????<!--?whitespace:?'preserve'?-->foo?\n?bar?baz?????<!--?whitespace:?'condense'?-->foo?bar?baz?

源碼

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

whitespace:?'condense'

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

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

相關鏈接：

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

通過 `is="vue:xxx"` 支持普通元素的轉換

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

棄用的 v-is 指令
is="vue:xxx" 的屬性

源碼


let?{?tag?}?=?node//?1.?動態組件
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:"?開頭//?在解析階段會被視為組件，并在此處進行//?tag?被重新賦值為?"vue:"?以后的內容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])}}
}

//?當?tag?為?<component>，或者?is="vue:xxx"，跳過后續處理
if?(name?===?'is'?&&(isComponentTag(tag)?||?(value?&&?value.content.startsWith('vue:')))
)?{continue
}
//?...

上述代碼中有幾個點：

首先 isComponentTag，用以判斷是否為動態組件：

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

查找是否含有 is 屬性

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

其主要原因是，兩者的 AST 結構不同。

相關鏈接：

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

附上 ChangeLog

Bug 修復

兼容： 處理并針對 config.optionMergeStrategies 實現告警 (94e69fd^[14])
compiler-core: 當注釋選項啟用時，在生產環境下將保留注釋 (e486254^[15])
hmr: 禁止從組件類型中移除 __file 的 key 值 (9db3cbb^[16])
hydration: 修復 asnyc 組件 hydrated 前的更新 (#3563^[17]) (c8d9683^[18]), closes #3560^[19]
reactivity: 修復 readonly + reactive Map 的追溯 (#3604^[20]) (5036c51^[21]), closes #3602^[22]
runtime-core: 確保聲明 props 的 key 永遠存在 (4fe4de0^[23]), closes #3288^[24]
runtime-core:?computed 監聽多個 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 應該支持監聽鍵路徑 (870f2a7^[32])

特性

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

性能提升

僅當實際改變時才會觸發 $attrs 的更新 (5566d39^[40])
compiler: 解析結束標簽時跳過不必要的檢查 (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]

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

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

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

今日話題

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

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

可加我個人微信?ruochuan12，長期交流學習