学习十七、Vue 模板编译

# v-for 中 key 的作用和好处

1、没有定义 key 的情况下，视图变化时逐个对比新旧节点，如果不同就会更新视图一次。

2、定义 key 的情况下，发现不同的节点时会对比新旧节点的个数长度，将不同节点先提出来，去对比剩下的节点，单独处理不同的节点，新增或删除，减少不必要的视图更新。

作用：方便让 vnode 在 diff 的过程中找到对应的节点，然后成功复用。

好处：可以减少视图更新次数，提升性能。

# Vue 中模板编译的程

模板字符串 -> AST对象 -> 优化AST（标记静态根节点）-> 字符串形式代码 -> new Function -> 匿名函数（render函数）

1、compileToFunctions(template, ...)

  - 从缓存中加载编译好的 render 函数

  - 缓存中没有调用 compile(template, options)

2、compile(template, options)

  - 合并 options

3、baseCompile(template.trim(), finalOptions)

  - parse() 把template转换成 AST tree

  - optimize()

    - 标记 AST tree 中的静态 sub trees

    - 检测到静态子树，设置为静态，不需要在每次重新渲染的时候重新生成节点

    - patch 阶段跳过静态子树

  - generate() AST tree 生成js的创建代码

4、compileToFunctions(template, ...)

  - 继续上一步中生成的字符串形式 js 代码转化为函数

  - createFunction()

  - render 和 staticRenderFns 初始化完毕，挂载到 Vue 实例的 options 对应的属性中