这是一个极其重要的模块,它是一个数据响应式系统。其暴露的主要 API 有 ref(数据容器)、reactive(基于 Proxy 实现的响应式数据)、computed(计算数据)、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 模块
目前这个模块没有实现任何功能。
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'