vue響應式如何做到的-前端問答-PHP中文網

Vue.js是一款流行的JavaScript框架，提供了一個方便的方式來建立互動式的網路應用程式。其中最突出的特點之一就是響應式資料綁定。那麼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實例會自動執行更新操作。