5號凌晨，尤雨溪公布了 Vue 3 源代碼。

話不多說，我們趁熱對 Vue 3 源碼進行一些簡要的分析。

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

兼容性

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

對 TypeScript 的使用

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

如果你還沒有學習 TypeScript，請盡快學習，否則可能看不懂源碼。

另外有件事情說出來可能會讓你非常驚訝，Vue 3 的源代碼完全沒有使用 class 關鍵字！（只在測試代碼和示例代碼里用到了 class 關鍵字）

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

目前 Vue 3 處于 Pre-Alpha 版本。后面應該還會有 Alpha、Beta 等版本。

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

閱讀建議

強烈推薦大家用國慶假期這段時間把 Vue 3 的源碼通看一遍，因為目前的代碼結構清晰，而且代碼量相對較少。

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

關于閱讀順序，我的建議是

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

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

代碼結構

代碼倉庫中有個 packages 目錄，里面是 Vue 3 的主要功能的實現(xiàn)，包括

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

可以看出，新的 Vue 代碼倉庫是模塊化的。接下來我們逐一來看看每個模塊暴露的 API。

@vue/runtime-core 模塊

大部分 Vue 開發(fā)者應該不會用到這個模塊，因為它是專門用于自定義 renderer 的。

使用方法示例：

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

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

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

export * from '@vue/runtime-core'

@vue/runtime-dom 模塊

這個模塊是基于上面模塊而寫的瀏覽器上的 runtime，主要功能是適配了瀏覽器環(huán)境下節(jié)點和節(jié)點屬性的增刪改查。它暴露了兩個重要 API：render 和 createApp，并聲明了一個 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 模塊

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

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 模塊

這是一個極其重要的模塊，它是一個數(shù)據(jù)響應式系統(tǒng)。其暴露的主要 API 有 ref（數(shù)據(jù)容器）、reactive（基于 Proxy 實現(xiàn)的響應式數(shù)據(jù)）、computed（計算數(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'

很明顯，這個模塊就是 Composition API 的核心了，其中的 ref 和 reactive 應該重點掌握。

@vue/compiler-core 模塊

這個編譯器的暴露了 AST 和 baseCompile 相關的 API，它能把一個字符串變成一棵 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 模塊

這個模塊則基于上個模塊，針對瀏覽器做了適配，如對 textarea 和 style 標簽做了特殊處理。

@vue/server-renderer 模塊

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

vue 模塊

這個模塊就是簡單的引入了 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'

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論