Vue原理笔记2

Vue 模板编译原理

Vue 中式如何将 template 转换成 render 函数？

虚拟 DOM：用 对象来描述 DOM 元素
ast 树：用 对象来描述 JS 语法

1. 将模板转换成 ast 树(即：用对象来描述真实的 JS 语法)
2. 优化树
3. 通过 ast 树再生成 render 函数
4. render 函数内部调用 _c 方法，产生虚拟 DOM

---

v-if 和 v-show 的区别

v-if 如果条件不成立就不会渲染当前 DOM
v-show 是切换当前 dom 的显示或隐藏

为什么 v-if 和 v-for 不能用在一起

因为 v-for 比 v-if 优先级高，连用的话会给 v-for 生成的每个元素都添加 v-if，影响性能

---

Diff 算法时间复杂度

完全时间复杂度为 O(n3)，由于在前端中，很少会跨越层级地移动 DOM 元素，所以 Vue 对其进行了优化，让其虚拟 DOM 只会同层级比较

Vue 中的 Diff 简单原理

1. 先同级比较，再比较子节点
2. 先判断一方是否有子节点
3. 再判断都有子节点的情况
4. 递归比较子节点

Vue 为什么要:key？

在没 key 的情况下，Vue 对两个树会进行暴力比对，只要标签一样，就复用，所以会造成一些差错
【注】如果会改变数组的情况，那么 key 最好不要是 index

---

组件中 data 为什么是一个函数？

同一个组件如果被复用多次，会创建多个实例，这些实例用的是同一个构造函数，如果 data 是一个对象的话，那么所有组件都共享了同一个对象，为避免组件之间数据互相影响，所以组件中的 data 要作为一个函数返回对象，以保证数据的独立。