Bagaimana untuk menjadikan vue responsif

Vue.js ialah rangka kerja JavaScript popular yang menyediakan cara mudah untuk membina aplikasi web interaktif. Salah satu ciri yang paling menonjol ialah pengikatan data reaktif. Jadi bagaimanakah pengikatan data responsif Vue dilaksanakan? Artikel ini akan menyelidiki prinsip pelaksanaan responsif Vue.

1. Prinsip teras responsif Vue

Prinsip teras responsif Vue ialah pengumpulan kebergantungan dan corak pemerhati.

Dalam Vue, setiap tika komponen mempunyai tika pemerhati yang sepadan. Apabila data reaktif digunakan dalam komponen, tika pemerhati ini akan mengikatnya secara automatik pada data yang sepadan.

Apabila data berubah, tika pemerhati akan secara automatik mengesan dan mencetuskan komponen untuk dipaparkan semula. Vue menggunakan teknologi DOM maya untuk mengoptimumkan pemaparan dan mengemas kini paparan komponen dengan cekap.

Jadi bagaimanakah komponen Vue mengetahui data yang responsif? Ini perlu bergantung kepada mekanisme pengumpulan untuk dicapai.

2. Pelaksanaan pengumpulan tanggungan

Vue menggunakan kelas yang dipanggil Dep untuk melaksanakan pengumpulan tanggungan. Setiap data reaktif (seperti objek atau tatasusunan) mempunyai contoh Dep yang sepadan.

Instance Dep menyimpan semua kejadian pemerhati yang bergantung pada data responsif ini. Apabila data berubah, tika Dep akan memberitahu semua tika pemerhati yang bergantung padanya untuk melaksanakan operasi kemas kini.

Jika data responsif digunakan dalam komponen, fungsi cangkuk yang dicipta akan dilaksanakan apabila komponen itu diwujudkan. Dalam fungsi ini, Vue akan mengumpul kebergantungan di mana data responsif digunakan dalam komponen.

Secara khusus, Vue menggunakan Object.defineProperty() untuk melaksanakan data responsif. Fungsi ini boleh merampas sifat objek Apabila sifat dibaca atau ditulis, kaedah get dan set akan dicetuskan secara automatik.

Apabila komponen dipaparkan, mengakses sifat data responsif akan mencetuskan kaedah get. Vue mengumpul kebergantungan dalam kaedah ini dan menambah tika pemerhati semasa pada tika Dep bagi data responsif ini. Apabila data berubah, tika Dep memberitahu tika pemerhati yang berkaitan untuk melaksanakan operasi kemas kini.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan Object.defineProperty() untuk melaksanakan data reaktif.

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.");
  }
});

Dalam contoh ini, kami mentakrifkan fungsi defineReactive() dan fungsi observe(), yang digunakan untuk merampas sifat objek dan melintasi objek dan merampas semua sifat masing-masing.

Apabila kami menggunakan data responsif dalam komponen, vue akan mengumpul kebergantungan secara automatik dan menambah tika pemerhati semasa pada tika Dep bagi data responsif. Apabila data responsif berubah, tika Dep akan memberitahu tika pemerhati yang berkaitan untuk melakukan operasi kemas kini.

3. Pelaksanaan Corak Pemerhati

Seperti yang dinyatakan sebelum ini, setiap contoh komponen mempunyai contoh pemerhati yang sepadan. Contoh pemerhati ini akan melakukan operasi kemas kini secara automatik apabila sebarang data reaktif berubah.

Vue menggunakan corak pemerhati untuk melaksanakan mekanisme ini. Khususnya, Vue menyimpan semua kejadian pemerhati dalam komponen dalam kelas yang dipanggil Pemerhati. Setiap contoh pemerhati boleh digunakan untuk memantau perubahan data dan melaksanakan fungsi panggil balik.

Apabila komponen dipaparkan, Vue akan menghuraikan dan menyusun templat dalam komponen dan menjana fungsi pemaparan. Fungsi pemaparan ini mencipta tika pemerhati dan menghantar contoh komponen semasa dan fungsi pemaparan kepada tika pemerhati.

Setiap kali data responsif berubah, tika Dep akan memberitahu semua tika pemerhati yang bergantung padanya untuk melaksanakan operasi kemas kini. Operasi kemas kini termasuk melaksanakan kaedah dapatkan tika pemerhati untuk mengira keadaan komponen baharu, dan kemudian melaksanakan fungsi panggil balik tika pemerhati untuk mengemas kini paparan komponen.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan kelas Watcher untuk memantau perubahan dalam data dan melaksanakan fungsi panggil balik.

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;

Dalam contoh ini, kami mentakrifkan kelas Watcher dan kelas Dep untuk memantau perubahan data dan memberitahu semua kejadian pemerhati untuk operasi kemas kini.

Apabila kami menggunakan data reaktif dalam komponen, Vue akan secara automatik mencipta tika pemerhati untuk mendengar perubahan data dan melaksanakan fungsi panggil balik. Apabila data berubah, kejadian pemerhati dalam senarai kebergantungan akan melakukan operasi kemas kini secara automatik.

4. Ringkasan

Prinsip pelaksanaan data responsif dalam Vue adalah sangat kompleks, yang melibatkan pelbagai konsep dan mekanisme seperti pengumpulan kebergantungan, mod pemerhati dan DOM maya. Artikel ini hanya memperkenalkan secara ringkas sebahagian daripada mereka.

Memandangkan Vue secara automatik melaksanakan pengikatan data yang responsif, pembangun boleh terus menggunakan data ini dalam komponen untuk pengaturcaraan. Ini sangat memudahkan kesukaran pengaturcaraan dan meningkatkan kecekapan pembangunan. Pada masa yang sama, sistem responsif data Vue juga memberi kami peluang untuk mengkaji dan menyelidik reka bentuk rangka kerja hadapan secara mendalam.

Atas ialah kandungan terperinci Bagaimana untuk menjadikan vue responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!