【Vue3】源码解析-编绎模块

发布时间:2024年01月18日

系列文章

【Vue3】源码解析-前置
【Vue3】源码解析-响应式原理
【Vue3】源码解析-虚拟DOM
【前端】Typescript入门
【Vue3】源码解析-编绎模块

computed.spec

computed 一般有两种常见的用法:
一:传入一个对象,内部有 set 和 get 方法,属于ComputedOptions形式。在内部会有getter / setter两个变量来进行保存.

const age = ref(18);
const myAge = computed({
  get() {},
  set() {},
});

二:传入一个 function,在内部会有getter来进行保存.

const age = ref(18);
const myAge = computed(() => {
  return age.value + 10;
});

计算属性的源码大部分是依赖 effect 的实现。基于上一篇文章对 effect 源码的理解,effect 可以传递一个函数和一个对象 options。
而计算属性的本质就是一个 effect,在之前 effect 的源码中预先声明了 lazy和scheduler 属性,就是用于计算属性,因为计算属性默认不会被执行,lazy 表示 effect 不会立即被执行,scheduler 会在 trigger 中判断是否传入了 scheduler,传入就执行 scheduler 方法。scheduler 中,判断当前的_dirty 是否为 false,会把_dirty 置为 true,且执行 trigger 触发响应。

// computed.ts
import { isFunction, TrackOpTypes, TriggerOrTypes } from "./shared";
import { effect, track, trigger } from "./effect";
 
class ComputedRefImpl {
  public _dirty = true; // 默认取值时不要用缓存
  public _value;
  public effect;
  constructor(getter, public setter) {
    this.effect = effect(getter, {
      // 1. 计算属性本身就是一个effect
      lazy: true, // 2. 默认不执行
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true;
          trigger(this, TriggerOrTypes.SET, "value");
        }
      },
    });
  }
  get value() {
    // 3.计算属性也要收集依赖,vue2中计算属性不具备收集依赖的,
    if (this._dirty) {
      this._value = this.effect(); // 4. 会将用户的返回值返回 也就是computed中 return
      this._dirty = false; // 5. 设置缓存
    }
    track(this, TrackOpTypes.GET, "value");  // 6. 依赖收集: 因为可能会在effect中使用计算属性
    /**
     *  const age = ref(18)
        const myAge = computed(() => { // 此方法默认不会被执行
            return age.value + 10;
        })
        // 当访问属性的时候执行
        console.log(myAge.value)
        console.log(myAge.value) // 多次取值,只取第一次执行结果走缓存
        age.value = 100; // 更新age,myAge不会立刻重新计算
        console.log(myAge.value) // 取值时才会重新计算
        effect(() => {  // 此effect中没有age 但是用到了计算属性,因此也需要依赖收集
            console.log(myAge.value)
        })
        age.value = 500  // 收集依赖后,属性值更新,需要在scheduler中触发trigger执行,
     */
    return this._value;   // 7. 多次取值,只取第一次执行结果走缓存
  }
  set value(newValue) {
    this.setter(newValue);
  }
}
 
// 1. 如果getterOrOptions是函数,会直接赋值给getter。并在用户进行复制操作时 给出只读提示
// 2. 否则getterOrOptions为对象,会将set和get分别赋值给setter,getter。
export function computed(getterOrOptions) {
  let getter;
  let setter;
  // 1. 如果getterOrOptions是函数,会直接赋值给getter。并在用户进行复制操作时 给出只读提示
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions;
    setter = () => {
      console.warn("computed value must be readonly");
    };
  } else {
    // 2. 否则getterOrOptions为对象,会将set和get分别赋值给setter,getter。
    getter = getterOrOptions.get;
    setter = getterOrOptions.set;
  }
  return new ComputedRefImpl(getter, setter);  // 3. 创建一个计算属性实例
}

parse.spec

根据参数options 和 html字符串执行 createParserContext 生成解析对象 context ,属性 options 值 为 参数 options 和默认配置 defaultParserOptions, 属性 source 和 originalSource 为参数 html字符串 ,barseParse 执行完后返回的是 ast 语法树

export function baseParse(
  content: string,
  options: ParserOptions = {}
): RootNode {
  const context = createParserContext(content, options)
  const start = getCursor(context)
  return createRoot(
    parseChildren(context, TextModes.DATA, []),
    getSelection(context, start)
  )
}

function createParserContext(
  content: string,
  rawOptions: ParserOptions
): ParserContext {
  const options = extend({}, defaultParserOptions)

  let key: keyof ParserOptions
  for (key in rawOptions) {
    // @ts-ignore
    options[key] =
      rawOptions[key] === undefined
        ? defaultParserOptions[key]
        : rawOptions[key]
  }
  return {
    options,
    column: 1,
    line: 1,
    offset: 0,
    originalSource: content,
    source: content,
    inPre: false,
    inVPre: false,
    onWarn: options.onWarn
  }
}

compile.spec

编译器的总入口,是编译器的一个基础骨架(概念上可以理解为基类),然后不同平台的编译系统都是基于baseCompile来进行扩展的,如dom编译、服务端渲染编译、sfc,都是基于baseCompile进行了对应平台下处理场景的扩展。

function baseCompile(
  template: string | RootNode,
  options: CompilerOptions = {}
): CodegenResult {
  // 省略无关代码...

  // 生成AST节点树
  const ast = isString(template) ? baseParse(template, options) : template
  // 获取节点转换工具集、指令转换工具集
  const [nodeTransforms, directiveTransforms] = getBaseTransformPreset(
    prefixIdentifiers
  )
  // 遍历AST节点树,对上面生成的AST进行指令转换,生成可用节点,同时根据compiler
  // 传入的配置(如是否做静态节点提升等)对AST节点树进行优化处理,为rootNode及
  // 下属每个节点挂载codegenNode
  transform(
    ast,
    extend({}, options, {
      prefixIdentifiers,
      nodeTransforms: [
        ...nodeTransforms,
        ...(options.nodeTransforms || []) // user transforms
      ],
      directiveTransforms: extend(
        {},
        directiveTransforms,
        options.directiveTransforms || {} // user transforms
      )
    })
  )
  
  // 对转换及优化后的AST进行代码生成
  return generate(
    ast,
    extend({}, options, {
      prefixIdentifiers
    })
  )
}

来源

编绎模块
Vue3 之 computed 计算属性的使用与源码分析详细注释
Vue3.0源码解读 - 编译系统
vue3源码阅读【compiler-core\src\parse.ts】【baseParse】

文章来源:https://blog.csdn.net/weixin_44231544/article/details/135668469
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。