Vue3 源码导读(推荐)(2)

这是一个极其重要的模块,它是一个数据响应式系统。其暴露的主要 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'

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1e9c4a090e65c4c4be088fc4fd1f1e80.html