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

1)

vue data two-way binding principle-observer

2)

vue data two-way binding Defined principle-wather

3)

vue data two-way binding principle-parser Complie

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

The above steps have already implemented the listener and subscriber. When the properties change, a notification is issued. So who is being notified by this notification? It must be the subscriber

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

1. Add itself to the property subscriber (

dep) when instantiating itself

2. It must have a

update()Method

3. When the attribute changes

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

The subscriber needs to cache himself and tell the listener that he wants to add me to the subscriber. Therefore, we need to modify the listener

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

}

when instantiating

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.

Implementation

MVVM

Here, first connect the listener

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>

You can see that the sum of

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: <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> Then you can directly modify the template data through

vue.name

, the next step is to implement the parser Complie [End]

Recommended learning:

vue.js tutorial

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!