一、 模板编译
- 模板编译介绍：模板编译的主要目的是将模板（template）转换为渲染函数（render）
<div>
<h1 @click="handler">title</div>
<p>some content</p>
</div>
- 渲染函数
render(h){
return h('div',[
h('h1',{ on: {click:this.handler } },'title' ),
h('p','some content')
])
}
- 模板编译的作用
- Vue2.x使用VNode描述视图以及各种交互，用自己编写的VNode比较复杂
- 用户只需要编写类似HTML代码 - Vue.js模板，通过编译器将模板转换为返回VNode的render函数
- .vue文件会被webpack在构建的过程中转换成render函数
二、Vue Template Explorer 网页工具
- 将html模板转换为render函数
三、 模板编译
image.png
- 什么是抽象语法树
- 抽象语法树建成AST（Abstract SyntaxTree）
- 使用对象的形式描述树形的代码结构
- 此处的抽象语法树是用来描述树形结构的HTML字符串
四、baseCompile -- AST
- 为什么要使用抽象语法树
- 模板字符串转换成AST后，可以通过AST对模板做优化处理
- 标记模板中的静态内容，在patch的时候直接跳过静态内容
-
在patch的过程中静态内容不需要对比和重新渲染
image.png
五、 模板编译过程--总结
image.png
六、组件化回顾
- 一个Vue组件就是一个拥有预定义选项的一个Vue实例
- 一个组件可以组成页面上的一个功能完备的区域，组件可以包含脚本、样式、模板
七、组件注册
- 全局组件
- 局部组件
image.png
八、 Vue.extend
image.png
九、组件的创建过程
image.png
