5號(hào)凌晨，尤雨溪公布了 Vue 3 源代碼。

話不多說，我們趁熱對(duì) Vue 3 源碼進(jìn)行一些簡(jiǎn)要的分析。

如果你還沒有閱讀過Composition API RFC，可能無法完全看懂下面的內(nèi)容。

兼容性

目前打包后的代碼是 ES2015+，不支持 IE 11。

對(duì) TypeScript 的使用

目前的代碼 98% 以上使用 TypeScript 編寫。

如果你還沒有學(xué)習(xí) TypeScript，請(qǐng)盡快學(xué)習(xí)，否則可能看不懂源碼。

另外有件事情說出來可能會(huì)讓你非常驚訝，Vue 3 的源代碼完全沒有使用 class 關(guān)鍵字?。ㄖ辉跍y(cè)試代碼和示例代碼里用到了 class 關(guān)鍵字）

什么時(shí)候發(fā)正式版

目前 Vue 3 處于 Pre-Alpha 版本。后面應(yīng)該還會(huì)有 Alpha、Beta 等版本。

根據(jù) Vue 官方時(shí)間表，至少要等到 2020 年第一季度才有可能發(fā)布 3.0 正式版。

閱讀建議

強(qiáng)烈推薦大家用國(guó)慶假期這段時(shí)間把 Vue 3 的源碼通看一遍，因?yàn)槟壳暗拇a結(jié)構(gòu)清晰，而且代碼量相對(duì)較少。

下載代碼后，使用 yarn dev 命令就可以對(duì)其進(jìn)行調(diào)試。（有人給出了詳細(xì)的調(diào)試技巧)

關(guān)于閱讀順序，我的建議是

1. 先讀 reactivity，能最快了解 Vue 3 的新特性；
2. 再讀 rumtime，理解組件和生命周期的實(shí)現(xiàn)；
3. 如果還有時(shí)間再讀 compiler，理解編譯優(yōu)化過程。

另外如果你想省時(shí)間，可以直接看所有 __tests__ 目錄里的測(cè)試用例來了解 Vue 3 的所有功能。目前有不到 700 個(gè)測(cè)試用例。

代碼結(jié)構(gòu)

代碼倉(cāng)庫(kù)中有個(gè) packages 目錄，里面是 Vue 3 的主要功能的實(shí)現(xiàn)，包括

• reactivity 目錄：數(shù)據(jù)響應(yīng)式系統(tǒng)，這是一個(gè)單獨(dú)的系統(tǒng)，可以與任何框架配合使用。
• runtime-core 目錄：與平臺(tái)無關(guān)的運(yùn)行時(shí)。其實(shí)現(xiàn)的功能有虛擬 DOM 渲染器、Vue 組件和 Vue 的各種API，我們可以利用這個(gè) runtime 實(shí)現(xiàn)針對(duì)某個(gè)具體平臺(tái)的高階 runtime，比如自定義渲染器。
• runtime-dom 目錄: 針對(duì)瀏覽器的 runtime。其功能包括處理原生 DOM API、DOM 事件和 DOM 屬性等。
• runtime-test 目錄: 一個(gè)專門為了測(cè)試而寫的輕量級(jí) runtime。由于這個(gè) rumtime 「渲染」出的 DOM 樹其實(shí)是一個(gè) JS 對(duì)象，所以這個(gè) runtime 可以用在所有 JS 環(huán)境里。你可以用它來測(cè)試渲染是否正確。它還可以用于序列化 DOM、觸發(fā) DOM 事件，以及記錄某次更新中的 DOM 操作。
• server-renderer 目錄: 用于 SSR。尚未實(shí)現(xiàn)。
• compiler-core 目錄: 平臺(tái)無關(guān)的編譯器. 它既包含可擴(kuò)展的基礎(chǔ)功能，也包含所有平臺(tái)無關(guān)的插件。
• compiler-dom 目錄: 針對(duì)瀏覽器而寫的編譯器。
• shared 目錄: 沒有暴露任何 API，主要包含了一些平臺(tái)無關(guān)的內(nèi)部幫助方法。
• vue 目錄: 用于構(gòu)建「完整構(gòu)建」版本，引用了上面提到的 runtime 和 compiler。

可以看出，新的 Vue 代碼倉(cāng)庫(kù)是模塊化的。接下來我們逐一來看看每個(gè)模塊暴露的 API。

@vue/runtime-core 模塊

大部分 Vue 開發(fā)者應(yīng)該不會(huì)用到這個(gè)模塊，因?yàn)樗菍ｉT用于自定義 renderer 的。

使用方法示例：

import { createRenderer, createAppAPI } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
 pathcProp,
 insert,
 remove,
 createElement,
 // ...
})

// `render` 是底層 API
// `createApp` 會(huì)產(chǎn)生一個(gè) app 實(shí)例，該實(shí)例擁有全局的可配置上下文
export { render, createApp }

export * from '@vue/runtime-core'

@vue/runtime-dom 模塊

這個(gè)模塊是基于上面模塊而寫的瀏覽器上的 runtime，主要功能是適配了瀏覽器環(huán)境下節(jié)點(diǎn)和節(jié)點(diǎn)屬性的增刪改查。它暴露了兩個(gè)重要 API：render 和 createApp，并聲明了一個(gè) ComponentPublicInstance 接口。

export { render, createApp }

// re-export everything from core
// h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core'

export interface ComponentPublicInstance {
 $el: Element
}

@vue/runtime-test 模塊

這個(gè)模塊的主要功能是用對(duì)象來表示 DOM 樹，方便測(cè)試。并且提供了很多有用的 API 方便測(cè)試：

export { render, createApp }

// convenience for one-off render validations
export function renderToString(vnode: VNode) {
 const root = nodeOps.createElement('div')
 render(vnode, root)
 return serializeInner(root)
}

export * from './triggerEvent'
export * from './serialize'
export * from './nodeOps'
export * from './jestUtils'
export * from '@vue/runtime-core'

@vue/reactivity 模塊

這是一個(gè)極其重要的模塊，它是一個(gè)數(shù)據(jù)響應(yīng)式系統(tǒng)。其暴露的主要 API 有 ref（數(shù)據(jù)容器）、reactive（基于 Proxy 實(shí)現(xiàn)的響應(yīng)式數(shù)據(jù)）、computed（計(jì)算數(shù)據(jù)）、effect（副作用） 等幾部分：

export { ref, isRef, toRefs, Ref, UnwrapRef } from './ref'
export {
 reactive,
 isReactive,
 readonly,
 isReadonly,
 toRaw,
 markReadonly,
 markNonReactive
} from './reactive'
export {
 computed,
 ComputedRef,
 WritableComputedRef,
 WritableComputedOptions
} from './computed'
export {
 effect,
 stop,
 pauseTracking,
 resumeTracking,
 ITERATE_KEY,
 ReactiveEffect,
 ReactiveEffectOptions,
 DebuggerEvent
} from './effect'
export { lock, unlock } from './lock'
export { OperationTypes } from './operations'

很明顯，這個(gè)模塊就是 Composition API 的核心了，其中的 ref 和 reactive 應(yīng)該重點(diǎn)掌握。

@vue/compiler-core 模塊

這個(gè)編譯器的暴露了 AST 和 baseCompile 相關(guān)的 API，它能把一個(gè)字符串變成一棵 AST。

export function baseCompile(
 template: string | RootNode,
 options: CompilerOptions = {}
): CodegenResult {
 // 詳情略 ...
 return generate(ast, options)
}

export { parse, ParserOptions, TextModes } from './parse'
export { transform /* ... */ } from './transform'
export { generate, CodegenOptions, CodegenContext, CodegenResult} from './codegen'
export { ErrorCodes, CompilerError, createCompilerError } from './errors'
export * from './ast'

@vue/compiler-dom 模塊

這個(gè)模塊則基于上個(gè)模塊，針對(duì)瀏覽器做了適配，如對(duì) textarea 和 style 標(biāo)簽做了特殊處理。

@vue/server-renderer 模塊

目前這個(gè)模塊沒有實(shí)現(xiàn)任何功能。

vue 模塊

這個(gè)模塊就是簡(jiǎn)單的引入了 runtime 和 compiler：

import { compile, CompilerOptions } from '@vue/compiler-dom'
import { registerRuntimeCompiler, RenderFunction } from '@vue/runtime-dom'

function compileToFunction(
 template: string,
 options?: CompilerOptions
): RenderFunction {
 const { code } = compile(template, {
  hoistStatic: true,
  ...options
 })
 return new Function(code)() as RenderFunction
}

registerRuntimeCompiler(compileToFunction)

export { compileToFunction as compile }
export * from '@vue/runtime-dom'

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論