An article to understand the two-way binding principle of watcher data in Vue (with code)

In the previous article "Analysis of the two-way binding principle of observer data in vue (code sharing)", we learned about the two-way binding principle of observer data in vue. The following article will give you an understanding of the two-way binding principle of watcher data in Vue. It has certain reference value. Friends in need can refer to it.

##vue Data two-way binding principle and simple implementation, this article will implement of mvvm watcher

vue data two-way binding principle-observer

vue data two-way binding Defined principle-wather

vue data two-way binding principle-parser Complie

vuedata two-way binding principle, And simple implementation, this article will implement mvvmWatcher

watcher.Watcher The subscriber serves as the communication bridge between Observer and Compile , the main things it does are:

dep) when instantiating itself

update()Method

dep.notice(), you can call your own update() method and trigger it The callback bound in Compile releases itself.

// 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;
  },
};

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

}

Watcher, call the get() method, and pass Dep.target=watcherInstance Mark the subscriber as the current watcher instance and forcefully trigger the getter method defined by the property. When the getter method is executed, it will be in the property's subscriber depAdd the current watcher instance so that watcherInstance can receive update notifications when the property value changes.

MVVM

Observer and the listener Watcher, and simulate some data first , implement simple data binding

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

div is initially hello world, and changes to chuchur after every second Adding timestamp, although it is implemented, is still far from what was imagined. It is vue.name not vue.data.name, so here you need to add a property proxy method to the Vue instance to access vm## The attribute proxy of # is to access the attributes of vm.data. The modified code is as follows: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function Vue(options) { this.$options = options || {}; this.data = this.$options.data; // 属性代理，实现 vm.xxx -&gt; 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; } }); } }</pre><div class="contentsignin">Copy after login</div></div> Then you can directly modify the template data through </p>vue.name<p> , the next step is to implement the parser <code>Complie [End]

Recommended learning:

The above is the detailed content of An article to understand the two-way binding principle of watcher data in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!