【源码】vue2 模板编译源码刨析

【公司内部分享】探索Vue.js框架内部原理和实现机制，旨在理解其核心概念和技术细节，以便更好地应用和定制Vue.js。

相关文章

• vue3 为什么说渲染、更新更快、内存占用更少
• vue3 为什么说打包体积更小
• vue3 为什么说跨平台能力更强
• vue2 项目结构与架构设计介绍
• vue2 变化侦测与异步更新源码刨析
• vue2 模板编译源码刨析
• vue2 patch源码刨析
• vuex4 源码浅析

环境

• vue：v2.6.1

vue2 模板编译源码刨析

---

一、编译过程

将模板解析为AST -> 遍历AST标记静态节点 -> 使用AST生成渲染函数

二、解析器 - 工作流程

基本原理

• 1：使用栈维护AST层级，遇到开始标签则把当前节点推入栈，遇到结束标签则把当前节点弹出栈
• 2：四个钩子函数（start，end，chars，comment）

工作流程

每截取一小段字符串，就会根据截取出来的字符串类型触发不同的钩子函数，直到模板字符串截空停止运行

三、解析器 – 生成AST

什么是AST ?
AST就抽象语法树，是源代码的抽象语法结构的树状表现形式，树上的每个节点都表示源代码中的一种结构。

四、优化器 – 工作流程

什么是静态节点

• 1：没有使用动态绑定语法（v-、@、：）
• 2：没有使用v-if、v-for、v-else等动态指令
• 3：不能是slot、component等内置标签
• 4：父节点不能是带v-for指令的template标签

什么是静态根节点

• 1：当前节点是静态节点
• 2：当前节点存在子节点且所有子节点都是静态节点
• 3：不能是一个只包含静态文本子节点的节点（成本）

工作流程

• 在AST中找出所有静态节点并打上标记，
• 再根据静态节点标记找出所有静态根节点并打上标记

五、优化器 – AST打标

目的

• 1：重新渲染时，不需要为静态树创建新节点
• 2：在虚拟DOM打补丁的过程可以跳过

六、代码生成器-生成字符串

格式

fn 函数名(
        String 标签名，
        {}  属性对象，
        []  子节点数组
)

函数映射

• _c() => createElement() 创建虚拟节点
• _v() => createTextNode() 创建文本
• _s() => => _s(name) 创建变量
• _m() => renderStatic() 静态节点render函数

七、代码生成器-转render函数

基本原理

• 1：通过new Function将字符串转换成了可执行函数
• 2：通过with建立特定作用域，传入this对象使得内部如_c、_v、name等函数和变量可直接读取当前实例对象