前端面试-javascript篇

Vue

Vue的响应式原理中的Object.defineProperty有什么缺陷？为什么Vue3推出了Proxy？

• Object.defineProperty无法监听到数组下标的变化，导致通过数据下标添加元素，不能实时响应；
• Object.defineProperty只能劫持对象的属性，从而需要对每个对象、每个属性进行遍历。如果属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象；
• Proxy不仅可以代理对象，还可以代理数组。还可以代理动态添加的属性；

Vue为什么要在列表中写key，其作用是什么？

Vue采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应的旧节点（一个key=>index的map映射）。如果没有找到就认为是一个新增的节点。而如果没有key的话，那么会采用遍历查找的方式去找到对应的旧节点。更新速度比较慢。

React

待续