Vue数据双向绑定原理及简单实现方法

Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一，它通过数据劫持结合发布者-订阅者模式来实现的。下面将详细介绍 Vue 数据双向绑定原理及简单实现方法。 一、数据劫持 Vue 中的数据劫持是通过 Object.defineProperty() 来实现的，其中会有 getter() 和 setter 方法。当读取属性值时，就会触发 getter() 方法，在 view 中如果数据发生了变化，就会通过 Object.defineProperty() 对属性设置一个 setter 函数，当数据改变了就会来触发这个函数。 二、发布者-订阅者模式 在 Vue 中，发布者-订阅者模式是通过 Dep 来实现的。Dep 也是一个订阅器，维护一个数组，用于收集订阅者，当数据变动时，触发 notify，再调用订阅者的 update 方法。 三、实现步骤 1. 实现 Observer 我们需要将要观察的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这意味着，每当给这个对象的某个值赋值时，就会触发 setter，从而监听到数据变化。 相关代码可以是这样： ```javascript var data = {name: 'kindeng'}; observe(data); data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq function observe(data) { if (!data || typeof data !== 'object') { return; } // 取出所有属性遍历 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); }); } function defineReactive(data, key, val) { observe(val); // 监听子属性 Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { return val; }, set: function(newVal) { console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal); val = newVal; } }); } ``` 2. 实现 Dep 接下来，我们需要实现一个消息订阅器，维护一个数组，用来收集订阅者，数据变动触发 notify，再调用订阅者的 update 方法。代码改善之后是这样： ```javascript function Dep() { this.subs = []; } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; ``` 3. 实现 Watcher 我们需要实现一个 Watcher，作为订阅者，负责更新视图层的变化。Watcher 在 defineReactive 方法内部定义的 dep 对象中添加订阅者。 四、总结 Vue 数据双向绑定原理及简单实现方法是通过数据劫持结合发布者-订阅者模式来实现的。我们可以通过 Object.defineProperty() 来实现数据劫持，并使用 Dep 来实现发布者-订阅者模式，最后通过 Watcher 来更新视图层的变化。