Vue源码

Vue模板编译器的工作流程 分析模板，将其解析为模板 AST。 将模板 AST 转换为用于描述渲染函数的 JavaScript AST。 根据 JavaScript AST 生成渲染函数代码 将模板转

KeepAlive组件 组件的激活与失活 “卸载”一个被 KeepAlive 的组件时，它并不会真的被卸载，而会被移动到一个隐藏容器中。当重新“挂载”该组件时， 它也不会被真的挂载，而会被从隐藏容器中

简单情况下的新旧两组子节点 相同的前置元素 开启一个while循环，让索引j从0开始递增，直到遇到不相同的节点为止 解决思路： j从0开始，oldChildren、newChildren依次拿到对应j

简单、双端diff算法比较 简单diff算法通过双遍历需要移动两次才能完成更新 双端diff算法只需要移动一次就能完成更新 双端比较的原理 双端 Diff 算法是一种同时对新旧两组子节点的两个端点进行

减少 DOM 操作的性能开销 现有的dom替换操作是卸载全部旧子节点，再挂载全部新子节点，由于没有复用任何 DOM 元素，所以会产生极大的性能开销 仅更新文本子节点 新旧vnode的children的

挂载子节点和元素的属性 子节点除了是字符串还会有节点就说明是vnode，所以需要把vnode.children 定义为数组 也需要在挂载mountElement时判断children类型，如果chil

渲染器与响应系统的结合 给effect传入一个renderer，renderer里面读取了响应式类型的数据，就会使响应式数据跟响应式数据关联起来，当响应式类型数据改变时自动触发renderer查询渲染

什么是原始值 原始值指的是 Boolean、Number、 BigInt、String、Symbol、undefined 和 null 等类型的值 引入 ref 的概念 Proxy第一个参数需要是对象

理解 Proxy 和 Reflect 未使用Reflect.get： 当原始数据的bar使用了this.foo，再在watch监听obj.foo,最后修改obj.foo 结果： 只执行了watch的e

什么是副作用函数 副作用函数指在执行过程中会对函数外部环境产生可观察的改变或与函数外部环境进行交互的函数 例如一个函数修改了全局变量 响应式数据的基本实现 思路： 设置一个set保存副作用函数 使用p

总结 渲染器的作用：把虚拟dom转换成真实dom 渲染器的原理：递归虚拟dom并用appendChild、createTextNode来创建真实dom template模版会被编译器编译成渲染函数（r

在Vue原型中添加_init方法 initState方法判断options中的data是否存在，存在就执行initData initData函数中先判断data是函数还是对象，如果是函数的话就用cal

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天 vue初次渲染过程： 先初始化数据 编译模板 生成render函数 生成虚拟dom 生成真实dom 渲染页面 先判断是否有r