Vue全体実現プロセス
4277 ワード
1.解析テンプレートをrender関数にする テンプレートのすべての情報はrender関数によって を含む.テンプレートで使用するdataの属性は、js変数 になります.テンプレートのv-model,v-for,v-onはjsロジック になりました. render関数はvnode を返します.
2.応答型リスニング開始 Object.definePropertyは、通常のJavaScriptオブジェクトをVueインスタンスのdataオプションに渡すと、vueはこのオブジェクトのすべての属性を遍歴し、Objectを使用します.definePropertyは、これらのプロパティをすべてgetter/setterに変換します.これらのgetter/setterはユーザーにとって表示されませんが、内部ではvueに依存を追跡させ、属性がアクセスされ、変更されたときに変化を通知します. dataの属性をvm上の にエージェントする
3.最初のレンダリング、ページの表示、ページのバインド初回レンダリング、updateComponent、vm._を実行render() render関数を実行するとvmにアクセスする.listとvm.title は応答式のgetメソッドによってなぜgetを傍受するのか、setを直接傍受してはいけませんか?dataには多くの属性があり、使用されていないものもあり、使用されていないものはgetに移動し、使用されていないものはgetに移動せず、getに移動していない属性もあります.setの場合、私たちも関心を持つ必要はありません.このように、不要な繰り返しレンダリングを避けることができます. updateComponentを実行すると、vdomのpatchメソッド に進みます. patchはvnodeをDOMにレンダリングし、初回レンダリングは を完了する.
4.data属性変化、rerenderトリガー属性の変更は応答式setによって に傍受される. setでupdateComponent を実行 updateComponent再実行vm.render() で生成するvnodeとprevVnodeをpatchで比較する . htmlで をレンダリング
<div id="app">
<p>{{price}}</p>
</div>
// render
with(this){ // this vm
return _c(
'div',
{
attrs: {"id": "app"}
},
[
_c('p', [_v(_s(price))])
]
)
}
2.応答型リスニング開始
// vue data
var obj = {};
var data = {
price: 100,
name: 'zhangsan'
};
var key, value;
for (key in data) {
// ， ， key
(function (key) {
Object.defineProperty(obj, key, {
get: function() {
console.log('get', key);
return data[key];
},
set: function(newVal) {
console.log('set', newVal);
data[key] = newVal;
}
})
})(key)
}
3.最初のレンダリング、ページの表示、ページのバインド
vm._update(vnode) {
const prevVnode = vm._vnode;
vm._vnode = vnode;
if (!prevVnode) {
vm.$el = vm._patch_(vm.$el, vnode);
} else {
vm.$el = vm._patch_(prevVnode, vnode);
}
}
function updateComponent() {
vm._update(vm._render());
}
4.data属性変化、rerenderトリガー