Vue进阶之源码阅读（二）虚拟DOM与模板编译

Vue进阶之源码阅读（二）虚拟DOM

为什么要使用虚拟 DOM

• 使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如 何操作 DOM，从而提高开发效率
• 作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。
• 关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM， 如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM。

整体过程

模板编译

• 模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)；
• 渲染函数既render函数，返回h函数
• 模板编译作用
  • Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂
  • 用户只需要编写类似 HTML 的代码 - Vue 模板，通过编译器将模板转换为返回 VNode 的 render 函数
  • .vue 文件会被 webpack 在构建的过程中转换成 render 函数

两个查看模板编译的工具

• vue-template-explorer https://template-explorer.vuejs.org/（不好打开）
  Vue 2.6 把模板编译成 render 函数的工具
• vue-next-template-explorer https://vue-next-template-explorer.netlify.app/（不好打开）
  Vue 3.0 beta 把模板编译成 render 函数的工具

模板编译入口

模板编译的核心就是baseCompile函数，位置 src/compiler/index.js
主要做三件事：

1. 解析器将模板解析为抽象语树 AST，只有将模板解析成 AST 后，才能基于它做优化或者生成代码字符串；
2. 优化抽象语法树；
3. 把抽象语法树生成字符串形式的 js 代码；

什么是抽象语法树

• 抽象语法树简称 AST (Abstract Syntax Tree)；
• 使用对象的形式描述树形的代码结构，对象中记录父子节点关系；
• 此处的抽象语法树是用来描述树形结构的HTML字符串；

为啥要使用抽象语法树

• 模板字符串转换成 AST 后，可以通过 AST 对模板做优化处理；
• 标记模板中的静态内容，在 patch 的时候直接跳过静态内容；
• 在 patch 的过程中静态内容不需要对比和重新渲染

查看ast 抽象语法树的工具 https://astexplorer.net
可以看看Vue3.0和Vue2.6的语法树，3.0简化了很多

模板编译的核心

就是

1. 把模板转换为 ast 抽象语法树。过程就是遍历html字符串，匹配查找到对应的标签属性、指令、等等，将其转换为 AST 对象，将内容存入 AST 对象属性上。
2. 优化 AST 优化器的目标：遍历生成的模板AST树并检测纯静态的子树，即DOM中不需要更改的部分。
   一旦我们检测到这些子树，我们就可以：
   1.将它们提升为常量，这样我们就不再需要在每次重新渲染时为它们创建新的节点；
   2.在修补过程中完全跳过它们。
3. 把抽象语法树生成字符串形式的 js 代码

模板编译过程

组件化

Vue.component( id, [definition] ), 其实内容就调用了Vue.extend( options )

1. 组件的创建过程是，先创建父组件，再创建子组件；
2. 挂载时是，先挂载子组件，再挂载父组件；

组件最好不好多层嵌套，消耗性能