前文
今天我们来看看Vue的面试题
Vue2和vue3的区别 ?
1.监测机制由Object.defineProperty变为proxy
2.API模式由选项式API变为组合式API
3.生命周期钩子不同
4.更新策略由双端diff算法改为快速diff算法
defineProperty和proxy的区别？
1.proxy支持map 、set 、weakMap等数据结构
2.Object.defineProperty不会拦截动态新增或删除对象属性的操作，而proxy支持十三种代理捕获器和反射方法
3.Object.defineProperty无法监听数组元素的变化
Vue3为什么要用proxy？
- 因为Proxy支持更多数据结构，可以使用weakMap（存储对象） - Map（存储对象属性） - Set （存储对象属性副作用函数）搭建一棵二叉树，达到拦截的目的
好处：
1.可以同时拦截多个对象
2.按需拦截，不同对象，同一对象不同属性拦截互不干扰，而Vue2中，在Set被触发时，会遍历所有数组中所有副作用函数，性能不好
3.weakMap的使用，可以避免内存泄漏
- proxy支持更多代理捕获器和反射方法，比如defineProperty中没有监听对象删除和新增对象属性的方法，无法监听数组元素变化，proxy都具备
选项式API和组合式API的区别是什么?
1. 数据组织方式：
- Options API： 使用
data、computed、methods等选项来组织组件的逻辑。 - Composition API： 使用
setup函数，将数据和函数等组织在一起。
2. 代码可重用性：
- Options API： 代码复用通常需要使用混入（Mixins）或者抽象组件。
- Composition API： 可以更容易地将逻辑抽象成可重用的函数。
3. 响应式数据：
- Options API： 使用
this来访问响应式数据。 - Composition API： 使用
ref、reactive等函数来创建和访问响应式数据。
可以简单聊聊双端算法的实现原理吗？
- 双端diff
移动/更新元素：
首先，建立四个指针，分别指向存储新旧dom节点数组的头尾元素。
其次，设立一个while循环（循环条件：新旧节点数组中头元素索引小于等于尾元素索引），每次循环都要先判断旧dom节点元素头尾指针是否为空，为空则指针向后/前移动。
最后通过四次判断，对新旧节点元素进行头对头、尾对尾、头对尾、尾对头的比较。
若两个元素间key值相等，则通过patch()函数将新dom元素子节点覆盖旧dom元素子节点。
若key值不仅相等，并且属于头对尾的情况，则patch()函数替换，而且将旧dom头部元素移动到旧dom尾部元素之后，头尾指针向后/前移动，反之亦然。
若四次比较下来找不到可以复用的节点，则将新节点数组中单个元素依次与旧节点所有元素比较，直到找到可以复用的节点
添加/删除元素：
当循环结束之后，设立两次判断
若旧指针头部索引大于旧指针尾部索引，但新指针头部索引小于等于新指针尾部索引，说明有元素需要挂载,
则遍历新节点数组，将新节点数组中元素，通过patch函数依次挂载到真实dom元素头部位置
若新指针头部索引大于新指针尾部索引，但旧指针头部索引小于等于旧指针尾部索引，说明有元素需要卸载，
则遍历旧节点数组，将旧节点数组中元素，依次卸载
