Vue.js 源码分析——模板编译和组件化

一、 模板编译

• 模板编译介绍：模板编译的主要目的是将模板（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