简单实现双向绑定

Vue 2.0 中的数据劫持实现，例如：
javascript // 监听器 function observer(data) { if (!data || typeof data !== 'object') { return; } Object.keys(data).forEach((key) => { defineReactive(data, key, data[key]); }); }
// 响应式对象定义 function defineReactive(data, key, value) { observer(value); // 递归子属性 Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { return value; }, set: function(newValue) { if (newValue !== value) { value = newValue; console.log(${key} has been changed to ${newValue}); } } }); }
在 Vue 3.0 中，使用 Proxy 实现更简洁的双向绑定：
javascript function reactive(data) { return new Proxy(data, { set(target, key, value) { target[key] = value; // 触发视图更新 watcher.update(); return true; }, get(target, key) { return target[key]; } }); }
这就是坑，Vue 2.0 和 Vue 3.0 的实现细节不同，不要混淆。
实操提醒：先理解数据劫持和 Proxy 原理，再进行双向绑定实现。