❗Vue原理 (必考！)

1. 组件化基础
如何理解 MVVM? ----- 很久以前就有组件化，数据驱动视图（MVVM，setState）

Vue、React框架的出现，使得我们可以直接去操控数据而不是原始的DOM节点。

View：视图DOM
Model：VUE组件里的data或者Vuex里state里面的数据。
两者之间通过ViewModel相关联，使得我们在Model修改的时候就能立刻执行View的渲染，View这层有啥点击、监听事件都可以修改到Model这一层的数据。Model View ViewModel.

v-for为什么要有key？
答：

2. ❗❗ Vue 响应式

怎么就能因为 this.name = name就可以改变name的数据并且显示在页面上呢？

核心API： Object.defineProperty

👆 实现监听

• 监听对象，监听数组？
• 复杂对象，深度监听？
• 这个方式有啥缺点？
  深度监听：👇
  
  缺点：👇
  
  监听数组：👇
  重新定义数组原型：const oldArrayProperty = Array.prototype
  

3. 虚拟DOM（Virtual DOM）

• DOM操作非常耗费性能
• 以前用jQuery，自行控制DOM操作的时机，手动调整
  
  👇👇没事儿多看几遍这个图：
  
  
  snabbdom使用
  vnode patch
  
  vdom把计算放在JS中，经过对比计算之后，找到最需要更新的DOM操作才会更新。

4. 🤠❗ diff算法
diff算法 并不是 vue 独创的，就像组件化一样，不是vue独有。

树diff 的时间复杂度为 $O(n^3)$

优化：

snabbdom源码解读：虚拟DOM对比过程

h函数输入： 标签、子元素, 返回一个对象：vnode

patch( , )
第一个参数不是vnode，创建一个空的vnode关联到这DOM元素。
每个vnode必须和一个DOM元素相关联。

❗❗ key 和 sel 都相等就是相同节点👇

如果不传key 导致 undefined === undefined ---> true,就只会比较selector。

patchVnode函数： vnode对比

text 和 children 不能共存。

上图是基于新的没有 text 的情况下：vnode.text === undefined
新的children有 旧的没有children（可能旧的有text）：setTextContent清空旧的text，再添加children：addVnodes;
旧的child有，新的无child：移除旧的child removeVnodes；
旧的有text：清空

🐶updateChildren 函数（复杂）
如果vnode 和 oldVnode 两个都有children，就 updateChildren
四个指针 开始开始 结束结束
。。。（要再看一遍）

diff 算法总结

5. 组件渲染/更新的过程
   初次渲染过程
   
   只触发可监听的数据的get。
   更新过程
   
   完成流程图（手动画一遍）
   
   👆模版已经编译完，生成 render 函数，render 函数生成VDOM树，在执行render函数时，会“touch” 触发到Data的getter，也就是说，我在模版中触发了哪个Data的依赖，就开始观察起来（watcher）。当修改Data时触发 setter，此时会notify通知 watcher 看看修改的Data是不是我们之前观察的Data，如果是的话，就触发 re-render 重新渲染，重新生成VDOM树...形成闭环。
   Claude讲解：
   

6. 异步渲染
回顾下 nextTick：修改三次只调用nextTick一次。汇总Data修改，一次性更新视图。减少DOM操作次数，提高性能。