Vue 3.1.0 的 beta 版發(fā)布

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

編輯 | KnowsCount

         QC-L

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

新特性

• onServerPrefetch：composition-api 版本的 serverPrefetch
• 組件級別的 compilerOptions
• @vue/compiler-core 支持了空白字符處理策略
• 支持通過 app.config.compilerOptions 配置運行時的編譯器
• devtools 改進了對 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 } = core

const { 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'

相關(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)換

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

1. 棄用的 v-is 指令
2. 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:" 開頭
    // 在解析階段會被視為組件，并在此處進行
    // 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.exp
    if (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
}
// ...

上述代碼中有幾個點：

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

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

2. 查找是否含有 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 實現(xiàn)告警 (94e69fd^[14])
• compiler-core: 當(dā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 永遠存在 (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])
• 運行時編譯器支持了組件級 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])

性能提升

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

參考資料