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.

##vueData two-way binding principle and simple implementation, this article will implementofmvvmwatcher

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 implementmvvmWatcher

watcher.WatcherThe subscriber serves as the communication bridge betweenObserverandCompile, the main things it does are:

dep) when instantiating itself

update()Method

dep.notice(), you can call your ownupdate()method and trigger it The callback bound inCompilereleases 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 theget()method, and passDep.target=watcherInstanceMark the subscriber as the currentwatcherinstance and forcefully trigger thegettermethod defined by the property. When thegettermethod is executed, it will be in the property's subscriberdepAdd the currentwatcherinstance so thatwatcherInstancecan receive update notifications when the property value changes.

MVVM

Observerand the listenerWatcher, and simulate some data first , implement simple data binding

divis initiallyhello world, and changes tochuchur after every secondAdding timestamp, although it is implemented, is still far from what was imagined. It isvue.namenotvue.data.name, so here you need to add a property proxy method to theVueinstance to accessvm## The attribute proxy of # is to access the attributes ofvm.data. The modified code is as follows:

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