Artikel untuk memahami prinsip pengikatan dua hala data pemerhati dalam Vue (dengan kod)

Dalam artikel sebelumnya "Analisis prinsip pengikatan dua hala data pemerhati dalam Vue (perkongsian kod) ", kami mengetahui tentang prinsip pengikatan dua hala data pemerhati dalam Vue . Artikel berikut akan memberi anda pemahaman tentang prinsip pengikatan dua hala data pemerhati dalam Vue Ia mempunyai nilai rujukan tertentu Rakan yang memerlukan boleh merujuknya.

vuePrinsip pengikatan dua hala data, dan pelaksanaan mudah, artikel ini akan melaksanakan mvvmwatcher

1)

Prinsip pengikatan dua hala pemerhati data vue

2)

Prinsip pengikatan dua hala vue data-wather

3)

prinsip mengikat dua hala data vue - parser Complie

prinsip mengikat dua hala data dan pelaksanaan mudah, artikel ini akan melaksanakan vue 's mvvmWatcher

Langkah di atas telah melaksanakan pendengar dan pelanggan Apabila sifat berubah, pemberitahuan akan dikeluarkan oleh pemberitahuan ini.

Pelanggan ialah dan watcher terutamanya melakukan perkara berikut: WatcherObserver1 Menambah dirinya pada pelanggan atribut (Compile) apabila membuat instantiation sendiri

2. . Ia mesti mempunyai kaedah dep

3. Apabila dimaklumkan tentang perubahan atribut update(), ia boleh memanggil kaedah

nya sendiri dan mencetuskan panggilan balik terikat dalam

, kemudian lepaskan sendiri. dep.notice()update()CompilePelanggan harus cache sendiri dan memberitahu pendengar bahawa ia mahu menambahkan saya pada pelanggan. Oleh itu, kita perlu mengubah suai pendengar

// Watcher
function Watcher(vm, exp, cb) {
  this.cb = cb;
  this.$vm = vm;
  this.exp = exp;
  // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
  this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
  update: function () {
    this.run(); // 属性值变化收到通知
  },
  run: function () {
    var value = this.get(); // 取到最新值
    var oldVal = this.value;
    if (value !== oldVal) {
      this.value = value;
      this.cb.call(this.$vm, value, oldVal); // 执行Compile中绑定的回调，更新视图
    }
  },
  get: function () {
    Dep.target = this; // 将当前订阅者指向自己, 缓存
    var value = this.$vm[this.exp]; // 强制触发监听的getter，添加自己到属性订阅器中
    Dep.target = null; // 添加完毕，重置释放
    return value;
  },
};

Apabila menginstant

, panggil kaedah

function defineReactive(data, key, val) {
  var dep = new Dep()
  observe(val); // 监听子属性
  Object.defineProperty(data, key, {
    ....
    get: function() {
      // 由于需要在闭包内添加watcher，所以可以在Dep定义一个全局target属性，暂存watcher, 添加完移除
      Dep.target && dep.addDep(Dep.target);
      return val;
    },
    ....
  });

}

, tandakan pelanggan sebagai contoh

semasa melalui Watcher, dan cetuskan secara paksa. kaedah definisi atributget(), apabila kaedah Dep.target=watcherInstance dilaksanakan, tika watcher semasa akan ditambahkan pada pelanggan atribut getter, supaya getter boleh menerima pemberitahuan kemas kini apabila nilai atribut berubah. depwatcherPelaksanaanwatcherInstance

Di sini, mula-mula sambungkan pendengarMVVM dan pendengar

, simulasikan beberapa data dahulu dan laksanakan pengikatan data mudah

ObserverWatcherAnda boleh melihat bahawa jumlah kandungan

pada mulanya adalah

<div id="name"></div>
<script>
  function Vue(data, el, exp) {
    this.data = data;
    observe(data);
    el.innerHTML = this.data[exp]; // 初始化模板数据的值
    new Watcher(this, exp, function (value) {
      el.innerHTML = value;
    });
    return this;
  }
  var ele = document.querySelector("#name");
  var vue = new Vue(
    {
      name: "hello world",
    },
    ele,
    "name"
  );
  setInterval(function () {
    vue.data.name = "chuchur " + new Date() * 1;
  }, 1000);
</script>

, dan berubah kepada

dengan cap masa selepas setiap saat Walaupun ia telah dilaksanakan, ia masih jauh daripada yang dibayangkan. Ia div bukan hello world, jadi di sini anda perlu menambah kaedah proksi atribut pada contoh chuchur, supaya mengakses proksi atribut vue.name sedang mengakses atribut vue.data.name Kod yang diubah suai ialah seperti berikut: Vuevmvm.data Kemudian anda boleh mengubah suai data templat secara terus melalui

Langkah seterusnya ialah melaksanakan penghurai

function Vue(options) {

  this.$options = options || {};
  this.data = this.$options.data;
  // 属性代理，实现 vm.xxx -> vm.data.xxx
  var self = this;
  Object.keys(this.data).forEach(function(key) {

    self.proxy(key); // 绑定代理属性

  });
  observe(this.data, this);
  el.innerHTML = this.data[exp]; // 初始化模板数据的值
  new Watcher(this, exp, function(value) {

    el.innerHTML = value;

  });
  return this;

}

Vue.prototype = {

  proxy: function(key) {
    var self = this;
    Object.defineProperty(this, key, {
      enumerable: false,
      configurable: true,
      get: function proxyGetter() {
        return self.data[key];
      },
      set: function proxySetter(newVal) {
        self.data[key] = newVal;
      }
    });
  }

}

vue.name[Tamat]CompliePembelajaran yang disyorkan:

tutorial vue.js

Atas ialah kandungan terperinci Artikel untuk memahami prinsip pengikatan dua hala data pemerhati dalam Vue (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!