前言：
今天小编给大家讲解一下，Vue2和Vue3的双向数据绑定原理。
我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
|
大家只要按图给我五星即可，谢谢大家的帮助。
vue2.x 是如何实现响应式系统的：
当你把一个普通的 js 对象传入 vue 实例作为 data 选项，vue 将遍历此对象的所有prototype（属性），并使用 object.defineProperty(),将这些 prototype(属性)，全部转换为 getter / setter，在 getter 中收集数据依赖，在 setter 中监听数据变化，一旦数据发生改变，在通知订阅者。
每个组件实例，都对应一个 watcher 实例，它会在组件渲染的过程把 “接触” 过的数据 prototype(属性)记录为依赖，之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染；
defineProperty 的痛点：
- 它无法发现对象新增和被删除的属性，当你给一个对象添加一个新的属性，这个新增的属性没有添加到 vue 的数据更新侦查机制里；
- Vue.set() 可以让 vue 知道你新增了一个属性，其实 Vue.set 可以让 Vue 知道新增了一个属性。其实 set() 内部也是通过调用 defineProperty() 来实现；
当你利用索引直接设置一个数组（new Array(4)）或者修改数组的长度时，Vue 不能检测到数组的变动；
当对象嵌套的层数特别深（多层嵌套）的时候，递归遍历带来的性能开销就会比较大；
Object.defineProperty 代码的使用
mounted() { // 先定义好一套规则 class Observer { constructor(data) { for (let key of Object.keys(data)) { if (typeof data[key] === "object") { data[key] = new Observer(data[key]); } Object.defineProperty(this, key, { enumerable: true, configurable: true, get() { console.log("You visited" + key); return data[key]; }, set(NewValue) { console.log("You set" + key); console.log("New Value" + NewValue); if (NewValue === data[key]) { return; } data[key] = NewValue; }, }); } } } let obj = { name: "app", age: 18, a: { b: 1, c: { d: 1, }, }, }; let app = new Observer(obj); console.log(app); app.age = 20; app.newProperty = "new attrs"; console.log(app); },
Proxy 方法的理解
Proxy 在 vue3.0 中上位
可以解决 defineProperty 的痛点，因为本质的原因在于 Proxy 是内置了拦截器对象。所有的外部访问都得先经过这一层拦截，不管是先前定义好的，还是新增的属性，又或者是深层的嵌套属性，访问时都会被拦截；
Reflect.set()方法用于设置对象属性的值，1：目标对象:2：改变参数的名称:3：改变参数的值:4：值是this如果遇到设置器，将提供给目标调用。
此方法返回一个布尔值，该值指示该属性是否已成功设置。
Proxy 代码的使用：
mounted() { const obj = { name: "app", age: 19, a: { b: 1, c: 2, }, }; const p = new Proxy(obj, { get(target, propKey, receiver) { console.log("Your visited：" + propKey); // Reflect.set()方法用于设置对象属性的值:1：目标对象:2：改变参数的名称:3：改变参数的值 // 此方法返回一个布尔值，该值指示该属性是否已成功设置。 return Reflect.set(target, propKey, receiver); }, set(target, propKey, value, receiver) { console.log("You set：" + propKey); console.log("New value：" + value); // Reflect.set()方法用于设置对象属性的值，1：目标对象:2：改变参数的名称:3：改变参数的值:4：值是this如果遇到设置器，将提供给目标调用。 // 此方法返回一个布尔值，该值指示该属性是否已成功设置。 return Reflect.set(target, propKey, value, receiver); }, }); p.age = "20"; console.log(p); p.newProperty = "New attribute"; console.log(p); },
结果：
总结：
- proxy 是用来操作对象并且扩展对象能到，而 Object.defineProperty() 只是单纯的操作对象的属性；
Vue2.X 是用 Object.defineProperty() 实现数据响应的，但是受限于 defineProperty() 的实现，必须递归遍历至对象的最底层；
vue3.0 用 Proxy 来拦截对象，不管对目标执行任何操作，都会先通过 Proxy 的处理逻辑；
除了 Vue3.0，还有其他的库也在使用 Proxy。
最后还请大家帮我点击一下，谢谢大家的帮助
我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
大家只要按图给我五星即可，谢谢大家的帮助。
以上就是 Vue2和Vue3的双向数据绑定原理，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
