# VUE知识点

# 1、vue响应式原理

# vue2.X版本中主要使用的是Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 在Object中指的是构造器对象

# 在vue中典型的使用场景：

新增或修改

Vue.set( target, key, value );
或者this.$set( target, key, value)
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
返回值：设置的值。

删除

Vue.delete( target, key, value );
或者this.$delete( target, key, value)

# 在vue中的使用原理

vue数据初始化时Object.defineProperty重新定义data中的所有属性，当页面使用属性的时候，进行页面属性依赖收集（收集在当前组件的watcher中），如果属性发生改变在通知相关依赖进行数据更新。在使用的这个过程中使用的订阅发布模式。Observer 作为发布者，Watcher 作为订阅者。

# 2、写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

解答：key值是每一个vnode的唯一id，作用是提高diff算法虚拟节点对比的准确性、快捷性；

（在实际项目中key值是用于判读组件更新时两个vnode是否相同，相同则复用，不相同则删除旧的，创建新的。）

准确性

根据key值产生vnode的唯一id，再根据id进行“===”判读是否更新当前vnode；

快捷性

只存在于有更新的情况下，利用key值的唯一性生成map对象来获取对应的节点信息，相对遍历方式更加的快捷；

key值在对修改节点执行diff算法时，性能确实有所提升
key值在对新增节点执行diff算法时，带key值新增是找不到可复用的vnode，所以新增时需要创建一个新的vnode和销毁之前的vnode,在DOM中也需要操作移除和添加，进一步的增大了性能开销。