vue双向绑定原理代码

Vue双向绑定原理基于Object.defineProperty()。
javascript function defineReactive(data, key, val) { Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function reactiveGetter() { return val; }, set: function reactiveSetter(newVal) { if (newVal === val) return; val = newVal; // 通知依赖 this.$watcher.run(); } }); }
function observe(data) { if (!data || typeof data !== 'object') return; Object.keys(data).forEach(key => defineReactive(data, key, data[key])); }
function autorun(watchFn) { const watcher = { fn: watchFn, run() { this.fn(); } }; return watcher; }
// 使用示例 let data = { name: 'vue' };
observe(data);
data.name = 'react'; // 触发setter，执行依赖通知
这就是坑，别信Vue双向绑定简单。