模板编译与组件化

模板编译介绍

将模板（template）转换为渲染函数（render）

自己编写vnode比较复杂，.vue文件会被webpack 在构建过程中转换成 render函数（vue-loader）。

• 运行时编译
• 构建时编译

编译生成的函数的位置

1. _c() : src/core/instance/render.js
2. _m() / _v() / _s() : src/core/instance/render-helpers/index.js
   1. _m() : renderStatic
   2. _v(): createTextVnode
   3. _s(): toString

Vue Template Explorer 工具

编译的入口函数 CompileToFunctions()

src/platforms/web/entry-runtime-with-compiler.js

1. createToFuntions()

src/platforms/web/complier/index.js

src/compiler/index.js

相关函数的关系

1. compileToFunctions(template, {}, this)
   1. 返回{ render, staticRenderFns }
2. createCompiler(baseOptions)
   1. 定义 compile(template, options) 函数
   2. 生成compileToFunctions
      1. createCompileToFunctionFn(compile)
   3. 返回{ compile, compileToFunctions }
   4. compileToFunctions() 函数是模板编译的入口
3. createCompilerCreator(function baseCompile(){})
   1. 传入baseCompile(template, finalOptions) 函数 // 参数 ： 模板，合并后的选项
   2. baseCompile
      1. 解析 parse
      2. 优化 optimize
      3. 生成 generate
   3. 返回 createCompiler()

AST 抽象语法树

使用对象的形式描述树形的代码结构

此处是 HTML字符串

1. 模板转为AST后，可以通过AST对模板做优化处理
2. 标记模板中的静态内容，在patch的时候跳过静态内容，不需要对比和重新渲染

astexplorer.net // ast工具

静态根节点： 标签中包含子标签，并且没有动态内容（纯文本）

v-pre : 跳过该节点的编译

组件化

1. 一个Vue组件就是一个拥有预定义选项的一个Vue实例
2. 一个组件可以组成页面上一个功能完备的区域，组件可以包含脚本、样式、模板

组件注册：

1. 全局组件

2. 局部组件

Vue.extend: 内部基于传入的选项对象，创建了组件的构造函数。组件的构造函数继承自Vue的构造函数，所以组件对象和Vue实例一样的成员。

回顾首次渲染的过程：

1. Vue构造函数
2. this._init()
3. this.$mount()
4. mountComponent()
5. new Watcher() 渲染Watcher
6. updateComponent()
7. vm._render() ----> createElement()
8. vm.update()

组件的创建过程： 组件转为 vnode 的过程

组件的patch过程： 先创建父组件再创建子组件，先挂载子组件再挂载父组件。

​ - 组件也不是分的越细越好，会影响性能。