双向数据绑定，它就像一个魔法，让你的网页上的数据和页面上的体现紧密相连。你修改数据，页面自动更崭新；页面内容改变，数据也随之调整。这听起来很厉害吧？其实背后有一些技术手段原理在支撑。而其中两种常用的技术手段就是 Object.defineProperty 和 Proxy 。它们都能够“劫持”对象的操作，拦问和修改属性的行为。但是它们之间还是存在着一些关键的差别。

哪些是双向数据绑定？

在较深入探讨之前，我们先来简洁了解一下哪些是双向数据绑定。简洁它是一种将单向数据流转化为双向的数据流的技术手段。这意味着：，害...

• 读取数据： 当你访问一个对象的属性时会触发相应的逻辑。
• 修改数据： 当你修改一个对象的属性时会触发相应的逻辑。

Object.defineProperty：轻巧量级的“劫持”

核心原理

Object.defineProperty 是 JavaScript 中一个非常基础的 API。它允许你在对象上定义或修改属性的特性。 精神内耗。 更十分沉关键的是你能够通过设置属性的 getter 和 setter 方法来拦截对该属性的访问和修改操作。

const data = { a: 1 }; { ; return this._a; },  set { ; this._a = v; }}); // ✅ 触发 getter/setter = 2;// ❌ 下面这行彻底静默， 不触发任意逻辑 = 3;

工作岗位方式

打脸。 当你在对象上采用 `Object.defineProperty` 定义了一个属性时JavaScript 会为该属性创建一个 getter 和一个 setter 方法。当你访问该属性时会调用 getter 方法；当你修改该属性时会调用 setter 方法。

优势

• 轻巧量级： 采用起来对比简洁直接，不会对性能造成很较大的作用于。
• 兼容性良好： 在较大更多数浏览器中都支持。

不足

• 无法监听动态添加/删除属性： 如果你在运行时动态地为对象添加或删除属性，Object.defineProperty 就无法监听这一些改变了。
• 不支持数组方法： 不能用于监听数组的方法。
• 嵌套代理繁杂： 如果你需要处理嵌套的对象的情况，Object.defineProperty 有可能变得对比繁杂和不容简单以维护。

Proxy：强较大较大的“代理”

`Proxy` 是 JavaScript 中一个更强较大较大的 API。它允许你创建一个代理对象，当前这个代理对象能够拦截其他对象的各种操作。 当你.… 你能够把 `Proxy` 看作是一个“中间人”，拦截并处理对原始对象的申请。

const data = { a: 1 };const proxy = new Proxy {    ;    return target;  },  set {    ;    target = value;    return true;  }}); = 2; // ✅ log: set a 2 = 3; // ✅ log: set b 3 —— 崭新增属性也被捕获

• 能够监听动态添加/删除属性： 你能够很简单地通过 `Proxy` 来监听对象上动态添加或删除的属性。
• 支持数组方法： 能够用于监听数组的方法 。
• 较深度代理支持： 能够轻巧松地处理嵌套的对象的情况 。

• 性能开销较较大： 采用起来相对来说对比缓慢一些。
• 兼容性问题 :** 在早期的一些浏览器中有可能不支持。

Object.defineProperty vs Proxy 的对比

const obj = {};// Object.defineProperty 版本 const obj = {};// Object.defineProperty版本 const obj = {};// Object.defineProperty版本 Object.defineProperty { console.log }, set { console.log document.getElementById.value = newVal } }) // 修改值后会输出console信息； const inputElement = document.getElementById; inputElement.addEventListener { obj = e.targetValue }); //这里用'prop'赋值给崭新定义的属性能实现 双向 数据绑定的效果
// Proxy 版本 const proxyObj = new Proxy; //创建proxyObj object ， 相当于原始的对象 ; const handlerObj ={ get : function  {} , set : function  {} };     const proxyObjHandler= new Proxy; const data={};const proxyData= new Proxy {console.’get’; return this.;} },{set{console.’set’;this.’a’=value;} }); proxyData=1;//这里提升了一个崭新的键 ; console.’get ‘;//打印获取的时候才会输出；console.’set ‘;//打印设置的时候才会输出；                                      }); // 修改值后会输出console信息；
//对比代码展示了两者实现方案的不同

Proxy 的陷阱

const data = { a: 1 };const proxy = new Proxy { ; return this._a; },  set { ; this._a = v; } });proxy =2;//✅ log:'set a'2proxy='b';//✅ log:'set b'

总而言之,

• Vue2 采用Object . defineProperty来实现响应式机制 。
• Vue3 采用Proxy来实现响应式机制 。

Vue3 中采用 Proxy 实现的双向绑定

const data={}; const reactiveData= new Proxy{ console.’get’; return this;} },{ set{ console.’Set’;this=value;} }); reactiveData=1;//获取的时候才会输出日志 console.’Get’ ; reactiveData=2};//设置的时候才会输出日志console.’Set’ ; );