vue响应式如何做到的-前端问答-PHP中文网

Vue.js是一款流行的JavaScript框架，提供了一个方便的方式来构建交互式的Web应用程序。其中最突出的特点之一就是响应式数据绑定。那么vue响应式数据绑定是如何实现的呢？本文将深入探讨vue响应式的实现原理。

Vue响应式的核心原理

Vue响应式的核心原理就是依赖收集和观察者模式。

在Vue中，每一个组件实例都有一个与之对应的watcher实例。当组件中使用了响应式数据时，这个watcher实例会自动将它与对应的数据进行绑定。

当数据发生变化时，watcher实例会自动检测并触发组件重新渲染。Vue使用虚拟DOM技术来优化渲染，能够高效地更新组件视图。

那么Vue组件如何知道哪些数据是响应式的呢？这就需要依赖收集的机制来实现。

依赖收集的实现

Vue使用了一个名为Dep的类来实现依赖收集。每个响应式数据（例如一个对象或数组）都有一个与之对应的Dep实例。

Dep实例中保存了所有依赖于这个响应式数据的watcher实例。当数据发生变化时，Dep实例会通知所有依赖于它的watcher实例执行更新操作。

如果组件中使用了响应式数据，那么在组件实例化时会执行created钩子函数。Vue在这个函数中会对组件中使用响应式数据的地方进行依赖收集。

具体来说，Vue使用Object.defineProperty()来实现响应式数据。这个函数可以对一个对象的属性进行劫持，当属性被读取或写入时，会自动触发get和set方法。

当组件渲染时，访问响应式数据的属性会触发get方法。Vue在这个方法中收集依赖，将当前的watcher实例加入到这个响应式数据的Dep实例中。当数据发生变化时，Dep实例通知相关的watcher实例执行更新操作。

下面是一个简单的例子，演示了如何使用Object.defineProperty()实现响应式数据。

function defineReactive(obj, key, val) {
  var dep = new Dep();

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      dep.depend(); // 将当前watcher实例添加到Dep实例中
      return val;
    },
    set: function(newVal) {
      if (val === newVal) {
        return;
      }
      val = newVal;
      dep.notify(); // 通知所有watcher实例进行更新
    }
  });
}

function observe(obj) {
  if (!obj || typeof obj !== "object") {
    return;
  }

  Object.keys(obj).forEach(function(key) {
    defineReactive(obj, key, obj[key]);
  });
}

// 示例代码
var data = { name: "Bob", age: 18 };
observe(data);

// 在组件中使用
var vm = new Vue({
  data: data,
  created: function() {
    // 访问数据的属性会触发get方法，实现依赖收集
    console.log("My name is " + this.name + ", I'm " + this.age + " years old.");
  }
});

登录后复制

在这个例子中，我们定义了defineReactive()函数和observe()函数，分别用于劫持对象属性和遍历对象并劫持所有属性。

当我们在组件中使用响应式数据时，vue会自动进行依赖收集，将当前的watcher实例添加到响应式数据的Dep实例中。当响应式数据发生变化时，Dep实例会通知相关watcher实例进行更新操作。

观察者模式的实现

之前提到，每个组件实例都有一个对应的watcher实例。当任何响应式数据发生变化时，这个watcher实例都会自动执行更新操作。

Vue使用观察者模式来实现这个机制。具体来说，Vue将组件中所有watcher实例存储在一个名为Watcher的类中。每个watcher实例都可以用来监听数据的变化并执行回调函数。

当组件渲染时，Vue会对组件中的模板进行解析和编译，生成一个渲染函数。这个渲染函数会创建一个watcher实例，并将当前的组件实例和渲染函数传递给watcher实例。

每当响应式数据发生变化时，Dep实例会通知所有依赖于它的watcher实例执行更新操作。更新操作包括执行watcher实例的get方法来计算新的组件状态，然后再执行watcher实例的回调函数来更新组件视图。

下面是一个简单的例子，演示了如何使用Watcher类实现监视数据的变化并执行回调函数。

function Watcher(vm, exp, cb) {
  this.vm = vm;
  this.exp = exp;
  this.cb = cb;
  this.value = this.get(); // 保存初始状态的值
}

Watcher.prototype = {
  constructor: Watcher,

  get: function() {
    Dep.target = this; // 将当前watcher实例设置到Dep类的静态属性中
    var value = this.vm[exp]; // 访问数据的属性，实现依赖收集
    Dep.target = null; // 重置Dep类的静态属性
    return value;
  },

  update: function() {
    var value = this.get();
    if (value !== this.value) { // 值发生变化时执行回调函数
      this.cb(value);
      this.value = value;
    }
  }
};

// Dep类
function Dep() {
  this.subs = [];
}

Dep.prototype = {
  constructor: Dep,

  addSub: function(sub) {
    this.subs.push(sub);
  },

  removeSub: function(sub) {
    var index = this.subs.indexOf(sub);
    if (index !== -1) {
      this.subs.splice(index, 1);
    }
  },

  depend: function() {
    if (Dep.target) {
      this.addSub(Dep.target); // 将当前watcher实例添加到依赖列表中
    }
  },

  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update(); // 通知所有watcher实例进行更新操作
    });
  }
};

Dep.target = null; // 静态属性，用于保存当前watcher实例

// 示例代码
var vm = new Vue({
  data: { name: "Bob", age: 18 },
  created: function() {
    // 创建一个watcher实例，用于监听数据变化并执行回调函数
    new Watcher(this, "name", function(value) {
      console.log("My name is " + value);
    });
    new Watcher(this, "age", function(value) {
      console.log("I'm " + value + " years old.");
    });
  }
});

// 改变数据的值，会触发回调函数的执行
vm.name = "Alice";
vm.age = 20;

登录后复制

在这个例子中，我们定义了Watcher类和Dep类，用于监视数据变化和通知所有watcher实例进行更新操作。

当我们在组件中使用响应式数据时，Vue会自动创建一个watcher实例来监听数据变化并执行回调函数。每当数据发生变化时，依赖列表中的watcher实例会自动执行更新操作。