Heim > Artikel > Web-Frontend > Analysieren Sie den Quellcode und sehen Sie, wie der Vue-Compiler die Rendering-Funktion generiert!

Analysieren Sie den Quellcode und sehen Sie, wie der Vue-Compiler die Rendering-Funktion generiert!

青灯夜游nach vorne: 2022-01-10 19:00:362149Durchsuche

In diesem Artikel werden Sie den Quellcode eingehend analysieren, das Problem anhand des Vue-Quellcodes untersuchen und sehen, wie der Vue-Compiler die Rendering-Funktion generiert. Ich hoffe, dass er für alle hilfreich ist.

Die ersten beiden Artikel verstehen hauptsächlich das Parsen und die Optimierung des vue-Compilers:

parst die html-Vorlage der Komponente in ein AST-Objektbasierend auf die
Fahren Sie mit der statischen Markierung fort. Markieren Sie zunächst, ob jeder Knoten ein „statischer Knoten“ ist, und markieren Sie dann den statischen „Wurzelknoten“ weiter, sodass die Aktualisierung des statischen Wurzelknotens in nachfolgenden Aktualisierungen übersprungen werden kann, wodurch die Leistung verbessert wird Lass uns unten mehr darüber erfahrenvue Wie der Compiler die laufende Rendering-Funktion aus dem AST-Syntaxbaum generiertTief in den Quellcode

createCompiler()-Methode – Eintrag

Dateispeicherort: `/src/compiler/index.js`

Die wichtigste Methode ist die generate(ast, options)-Methode, die für die Generierung von Rendering-Funktionen aus dem verantwortlich ist AST

Syntaxbaum.

/*
  在这之前做的所有的事情，只是为了构建平台特有的编译选项（options），比如 web 平台
  1、将 html 模版解析成 ast
  2、对 ast 树进行静态标记
  3、将 ast 生成渲染函数
     - 静态渲染函数放到 code.staticRenderFns 数组中
     - 动态渲染函数 code.render
     - 在将来渲染时执行渲染函数能够得到 vnode
 */
export const createCompiler = createCompilerCreator(function baseCompile(
  template: string,
  options: CompilerOptions
): CompiledResult {
  /* 
   将模版字符串解析为 AST 语法树
   每个节点的 ast 对象上都设置了元素的所有信息，如，标签信息、属性信息、插槽信息、父节点、子节点等
  */
  const ast = parse(template.trim(), options)

  /*
   优化，遍历 AST，为每个节点做静态标记
     - 标记每个节点是否为静态节点，保证在后续更新中跳过这些静态节点
     - 标记出静态根节点，用于生成渲染函数阶段，生成静态根节点的渲染函数
       优化，遍历 AST，为每个节点做静态标记
 */
  if (options.optimize !== false) {
    optimize(ast, options)
  }

  /*
    从 AST 语法树生成渲染函数
    如：code.render = "_c(&#39;div&#39;,{attrs:{"id":"app"}},_l((arr),function(item){return _c(&#39;div&#39;,{key:item},[_v(_s(item))])}),0)"
  */
  const code = generate(ast, options)

  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

/src/compiler/index.js

其中最主要的就是 generate(ast, options) 方法，它负责从 AST 语法树生成渲染函数.

/*
   从 AST 生成渲染函数：
    - render 为字符串的代码
    - staticRenderFns 为包含多个字符串的代码，形式为 `with(this){return xxx}`
*/
export function generate (
  ast: ASTElement | void, // ast 对象
  options: CompilerOptions // 编译选项
): CodegenResult {

  /*
    实例化 CodegenState 对象，参数是编译选项，最终得到 state ，其中大部分属性和 options 一样
  */
  const state = new CodegenState(options)

  /* 
   生成字符串格式的代码，比如：&#39;_c(tag, data, children, normalizationType)&#39;
    - data 为节点上的属性组成 JSON 字符串，比如 &#39;{ key: xx, ref: xx, ... }&#39;
    - children 为所有子节点的字符串格式的代码组成的字符串数组，格式：
      `[&#39;_c(tag, data, children)&#39;, ...],normalizationType`，
    - normalization 是 _c 的第四个参数，表示节点的规范化类型（非重点，可跳过）

    注意：code 并不一定就是 _c，也有可能是其它的，比如整个组件都是静态的，则结果就为 _m(0)
  */
  const code = ast ? (ast.tag === &#39;script&#39; ? &#39;null&#39; : genElement(ast, state)) : &#39;_c("div")&#39;

  return {
    render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}

generate() 方法