Vue2.0 双向绑定的原理与缺陷？

原理

Object.defineProperty、getter、setter 标准回答 Vue响应式指的是：组件的data发生变化，立刻触发试图的更新

原理：Vue采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过对data里面的对象属性进行遍历劫持数据的getter和setter，

当数据发生改变时，会触发对应的setter方法 通过dep.notice()去通知订阅者watcher，watcher接受到消息之后在去触发patch比较新老dom，

在去触发页面的更新

缺点

Object.defineProperty的缺点

一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出

不能监听对象的新增属性和删除属性

无法正确的监听数组的方法，当监听的下标对应的数据发生改变时

解决方法

运用this.$forceUpdate()强制刷新。

使用vm.$set(vm.items, indexOfItem, newValue)

将原数据 obj 进行深拷贝一下，然后再对拷贝后的数据 obj1 进行操作，然后再把操作后的数据obj1 赋值给原数据 obj

第一种情况，可以使用数组的splice方法，arr.splice(index, 1, item)

Object.defineProperty的不足

Object.defineProperty(obj, key, {enumberable:true,configurable:true,get {},set(value) {}});

vue是通过对Data中的属性进行遍历，数据劫持，通过getter（监听数据读取）和setter（监听数据修改），getter在读取数据的时候收集watcher作为依赖，setter在数据发生变化时通知watcher触发视图更新。

更新数组内容时是不会触发界面更新的。只有一些改变数组的方法push(),pop(),shift(),unshift(),splice(),sort(),reverse() 才会触发。对象里面的数组除外。

vue3.0的Proxy

替代了原有的 Object.defineProperty

Proxy和Object.defineProperty的区别是：后者定义的是一个对象上某个值得表现，前者是一个对象行为得表现，不局限某个属性，能观察到对象中属性的增加和删除，可以弥补后者的不足。