vue源码（中）

课程目标

对vue源码有一定的了解，包括模版编译，生命周期，实例方法等；

知识要点

模版编译

渲染流程

模版解析流程

1.模板解析阶段主要做的工作是把用户在<template></template>标签内写的模板使用正则等方式解析成抽象语法树（AST）。而这一阶段在源码中对应解析器（parser）模块。

解析器，顾名思义，就是把用户所写的模板根据一定的解析规则解析出有效的信息，最后用这些信息形成AST。我们知道在<template></template>模板内，除了有常规的HTML标签外，用户还会一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则，所以解析器不可能只有一个，它应该除了有解析常规HTML的HTML解析器，还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。

另外，文本信息和标签属性信息却又是存在于HTML标签之内的，所以在解析整个模板的时候它的流程应该是这样子的：HTML解析器是主线，先用HTML解析器进行解析整个模板，在解析过程中如果碰到文本内容，那就调用文本解析器来解析文本，如果碰到文本中包含过滤器那就调用过滤器解析器来解析。

生命周期

Vue实例的生命周期大致可分为4个阶段：

• 初始化阶段：为Vue实例上初始化一些属性，事件以及响应式数据；

• 模板编译阶段：将模板编译成渲染函数；

• 挂载阶段：将实例挂载到指定的DOM上，即将模板渲染到真实DOM中；

• 销毁阶段：将实例自身从父组件中删除，并取消依赖追踪及事件监听器

数据相关的实例方法

与数据相关的实例方法有 3 个，分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原型上的

事件相关的实例方法

与事件相关的实例方法有4个，分别是vm.$on、vm.$emit、vm.$off和vm.$once。它们是在eventsMixin函数中挂载到Vue原型上的

生命周期相关的方法

与生命周期相关的实例方法有4个，分别是vm.$mount、vm.$forceUpdate、vm.$nextTick和vm.$destory