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

Prinsip pengikatan dua hala pemerhati data vue

Prinsip pengikatan dua hala vue data-wather

prinsip mengikat dua hala data vue - parser Complie

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

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

, 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

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

}

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

ObserverWatcherAnda boleh melihat bahawa jumlah kandungan

<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>

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

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:

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!