虚拟DOM

VNode:用Js计算性能来换取操作真实Dom所消耗的性能。

● 当数据发生变化时，生成真实dom对应的虚拟dom节点，跟本地缓存的虚拟dom进行对比，找出差异所在，然后将差异更新到真实dom上，可以最小程度的减少操作dom。对比新旧VNode找出差异的过程------DOM-Diff（核心所在）。

Dom-Diff 的过程也叫：patch， 即对旧的虚拟dom修补，得到新的虚拟dom。以新的VNode为基准，改造oldVNode使之成为跟新的VNode一样。

● 模板编译

template----->render函数   ☆  ☆  借用ast语法树

包含过程：模板解析，优化阶段，代码生成阶段。

1、模板解析：将一堆模板字符串用正则等方式解析成抽象语法树AST;

2、优化阶段：遍历AST，找出其中的静态节点，并打上标记；

 

3、代码生成：将AST转换成渲染函数；

// 源码位置: /src/complier/index.js

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 模板解析阶段：用正则等方式解析 template 模板中的指令、class、style等数据，形成AST
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    // 优化阶段：遍历AST，找出其中的静态节点，并打上标记；
    optimize(ast, options)
  }
  // 代码生成阶段：将AST转换成渲染函数；
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})