Problem: vue的双向绑定的原理是什么？

*[interview]: start 在 VUE2.0 中采用 defineProperty 对每一个属性进行劫持，并给该属性添加get 和 set ，从而达到在设置和获取该属性时触发数据或视图的更新

在 vue3.0 中则是采用的 proxy 代理每一个属性，以达到设置和获取时数据和视图的同步更新 *[interview]: end

Vue 数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。

所谓数据劫持，就是利用 JavaScript 的访问器属性，即 Object.defineProperty() 方法（Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty 更改为 Proxy 代理），当对对象的属性进行赋值时，Object.defineProperty 就可以通过 set 方法劫持到数据的变化，然后通知发布者(主题对象)去通知所有观察者，观察者收到通知后，就会对视图进行更新。

Object.defineProperty 和 Proxy 的优缺点： 1.Object.defineProperty 的缺点 不能监听数组：因为数组没有getter和setter，因为数组长度不确定，如果太长性能负担太大 只能监听属性，而不是整个对象，需要遍历循环属性 只能监听属性变化，不能监听属性的删减 2.Proxy 的好处 可以监听数组 监听整个对象不是属性 13种来截方法，强大很多 返回新对象而不是直接修改原对象； 3.Proxy 的缺点 兼容性不好，而且无法用 polyfill 磨平