Vue响应式原理及key的作用

1.Vue的响应式原理中Object.defineProperty有什么缺陷？为什么在Vue3中被抛弃了而采用了Proxy?

原因如下：

a:Object.defineProperty无法低耗费的监听数组下标的变化，导致通过数组下标添加元素，不能实时响应；

b:Object.defineProperty只能劫持对象的属性，从而需要对每个对象每个属性进行遍历，如果属性值是对象，还需要进行深度遍历；Proxy可以劫持整个对象，并返回一个新对象；

c:Proxy不仅可以代理对象，还可以代理数组，还可以代理动态增加的属性。

2.在写Vue项目时，为什么要在列表属性中写key，其作用是什么？

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

3.对于HTML语义化的理解？

答：语义化就是选择与语义相符的标签，使标签语义化，这样不仅便于让开发者阅读，同时也能便于维护和写出更加优雅的代码，还能够让搜索引擎和浏览器等工具更好的解析，通俗的将语义化就是让正确的标签做正确的事。