# 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 磨平