前回の記事「vueにおけるオブザーバーデータの双方向バインディング原理の分析(コード共有)」では、vueにおけるオブザーバーデータの双方向バインディング原理について学びました。 。次の記事では、Vue のウォッチャー データの双方向バインディングの原理を理解することができます。これには一定の参照価値があり、困っている友人はそれを参照できます。
vue データ双方向バインディングの原則と簡単な実装。この記事では、
mvvm ウォッチャーの
を実装します。
vue データ 2- way バインディング 定義済みの原則-wather
3)vue データ双方向バインディング原則-パーサー Complie
vuedata two-wayバインディング原則、および簡単な実装、この記事では
mvvmWatcher
watcher.
Watcher である必要があります。サブスクライバは、
Observer と
の間の通信ブリッジとして機能します。 Compile の主な処理は次のとおりです:
dep) に追加します
update()Method
dep.notice() に変更されると、独自の
update() メソッドを呼び出して、
Compile でバインドされたコールバックはそれ自体を解放します。
// 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; }, };
Watcher
をインスタンス化するときにリスナー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; }, .... }); }
を変更し、
get() メソッドを呼び出して、
Dep.target=watcherInstance## を渡す必要があります。 # サブスクライバを現在の watcher
インスタンスとしてマークし、プロパティによって定義された getter
メソッドを強制的にトリガーします。getter
メソッドが実行されると、プロパティのサブスクライバー dep
現在の watcher
インスタンスを追加して、プロパティ値が変更されたときに watcherInstance
が更新通知を受信できるようにします。
実装MVVM
ここでは、まずリスナー とリスナー Watcher
を接続し、最初にいくつかのデータをシミュレートします。単純なデータ バインディングを実装します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div>
の合計は最初は hello world
で、2 秒ごとに chuchur に変化することがわかります。タイムスタンプは実装されていますが、まだ想像とは程遠いものです。これは
vue.data.name ではなく
vue.name なので、ここでは
vue インスタンスにプロパティ プロキシ メソッドを追加して
vm にアクセスする必要があります。 の属性プロキシは、
vm.data の属性にアクセスするためのものです。変更されたコードは次のとおりです:
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 、次のステップはパーサーを実装することです Complie
[終了]
vue.js チュートリアル
以上がVue のウォッチャー データの双方向バインディング原理を理解するための記事 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。