Vue双向数据绑定 vue双向数据绑定的原理是什么

Vue.js的双向数据绑定是其核心特性之一，它通过结合数据劫持（Data Binding）和发布-订阅模式（Observer Pattern）实现。以下是一个简化的、概念层面的实现原理说明以及对应的伪代码示例：

原理概览

1. 数据劫持：

Vue使用Object.defineProperty()方法来劫持对象属性的getter和setter。当任何属性被访问或修改时，Vue能够捕捉到这些变化。

2. 依赖收集 (Dep)：

在初始化组件或者数据改变时，Vue会遍历data对象的所有属性，对每个属性创建访问器属性，并在getter中执行依赖收集。这意味着每当一个组件渲染过程中读取了某个属性时，该组件会被添加到这个属性对应的依赖集合（Dep）中。

3. 观察者 (Observer)：

每个需要响应式的数据对象都会变成一个观察者实例，负责监听并记录所有依赖于它的“订阅者”。

4. 订阅者 (Watcher)：

组件中的指令、计算属性等都是订阅者。它们会在渲染过程中获取数据，触发数据的getter从而将自己注册为该数据的依赖。

5. 更新视图：

当数据发生变化时，setter会被调用，通知相关联的Dep有变化发生。Dep随后会通知所有的订阅者（Watcher），订阅者接收到通知后会重新计算结果，并触发视图的更新。

简化版伪代码实现：

// 观察者类 Observer，用于数据劫持与依赖收集

class Observer {

constructor(value) {

this.value = value;

this.walk(value); // 遍历对象属性，进行数据劫持

}

walk(obj) {

Object.keys(obj).forEach(key => {

defineReactive(obj, key, obj[key]); // 对每个属性定义访问器属性

});

}

}

function defineReactive(obj, key, val) {

const dep = new Dep(); // 创建依赖收集容器

let childOb = observe(val); // 如果值还是对象，则递归进行数据劫持

Object.defineProperty(obj, key, {

get() {

Dep.target && dep.addSub(Dep.target); // 收集依赖

return val;

},

set(newVal) {

if (newVal === val) return;

val = newVal; // 更新值

childOb && childOb.observe(newVal); // 如果新值仍需劫持，则替换旧观察者

dep.notify(); // 通知所有订阅者（Watcher）

}

});

}

// 依赖收集容器类 Dep

class Dep {

constructor() {

this.subs = []; // 存储订阅者

}

addSub(sub) {

this.subs.push(sub);

}

notify() {

this.subs.forEach(sub => sub.update()); // 调用订阅者的update方法

}

}

// 订阅者类 Watcher，代表组件中的watcher实例

class Watcher {

constructor(vm, key, cb) {

this.vm = vm;

this.key = key;

this.cb = cb;

this.get(); // 初始化时立即获取一次值，触发依赖收集

}

get() {

Dep.target = this; // 设置当前上下文作为依赖收集的目标

const value = this.vm[this.key]; // 触发数据的getter

Dep.target = null; // 清除依赖收集目标

return value;

}

update() {

this.cb.call(this.vm, this.vm[this.key]); // 触发视图更新函数

}

}

// 示例：初始化一个Vue实例并启动数据响应式过程

function Vue(options) {

this._data = options.data;

observe(this._data); // 将data转换为响应式对象

// ... 其他Vue实例构造逻辑，如模板编译、事件处理等

}

请注意，上述代码仅为简化示例，实际Vue.js内部的实现更为复杂和完善，包括对数组类型的数据劫持、深度观察、优化性能等方面做了很多工作。