Home > Article > Web Front-end > 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
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
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; }, };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.
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 -> 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
, the next step is to implement the parser Complie
[End]
Recommended learning:
vue.js tutorialThe 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!