Der Inhalt dieses Artikels befasst sich mit der dreistufigen Erklärung der Vue-Implementierung (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.
Vue ist heute ein beliebtes Framework. Es kann eine bidirektionale Bindung von Daten durchführen. Die Gründe, die ich kenne, sind ungefähr folgende.
1. Der herkömmliche Vorgang zum Ändern der Dom-Struktur ist ein sehr verschwenderischer Vorgang (d. h. langsam)
2. Das Einfügen der Logik zum Ändern der Dom-Struktur in die js-Ebene kann die Leistung verbessern.
3. Die Trennung von Daten und Ansicht entspricht eher der objektorientierten Programmierung
vue wird auch mit virtuellem Dom implementiert gerendert durch Vorlagen mit js Der resultierende Dom.
Die Schritte zur Implementierung von Vue sind wahrscheinlich diese drei Schritte:1. Reaktionsfähigkeit: Wie überwacht Vue die Änderungen in jedem Attributwert von Dota?
2. Template-Engine: Wie wird die Vorlage von Vue geparst und wie werden Anweisungen verarbeitet?
3. Vorlagenrendering: Wie füge ich die Daten in data zur Vorlage hinzu und rendere sie in HTML?
Schritt 1: Reaktionsfähigkeit
Die Implementierung der Reaktionsfähigkeit hängt hauptsächlich von der Methode eines Objekts ab:
Object.defineProperty
Diese Methode kann Änderungen an Attributen im Objekt überwachen und eine logische Verarbeitung durchführen
Dome lautet wie folgt:
var obj={}
var _name ='zhangsan'
Object.defineProperty(obj,'name',{
get:function() {
console.log('get')
return _name
},
set: function(newVal) {
console.log('set')
_name=newVal
}
})Hier ändern Sie den Wert von Name oder Zugriff Der Wert des Namens wird gedruckt.
Und die Simulationsimplementierung in Vue sieht wahrscheinlich so aus:
var vm ={}
var data={name:'张三',age:20}
var key,value;
for(key in data) {
(function(key){
Object.defineProperty(vm,key,{ //绑定到vm上
get:function(){
console.log('get')
return data[key];
},
set:function(newVal){
console.log('set');
data[key]=newVal
}
})
})(key) //闭包处理
}Tatsächlich müssen Studenten, die Java studiert haben, damit vertraut sein direkt in der Java-Klasse generiert und Methode festgelegt
Die Vorlage muss in JS-Code konvertiert werden, weil:
Logische Beurteilung (v-if , v-for), muss Dies kann nur mit js erreicht werden.
2. Das Rendern des virtuellen Doms muss mit js erreicht werden. (Renderfunktion)
Vorlage 1
<div id="app">
<p>{{price}}</p>
</div>Transformiert durch Vorlage 1 rendern
with(this) { //this就是vm
return _c(
'p',
{
attrs:{'id':'app'}
},
[
// _c是createElement
// _v是createTextVNode
// _s是toString方法
_c('p',[_v(_s(price))])
]
)
}Vorlage 2
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>Transformiert durch Vorlage 2 rendern
with (this) {
return _c(
'p',
{ attrs: { "id": "app" } },
[
_c(
'p',
[
_c(
'input',
{
//指令
directives: [
{
name: "model",
rawName: "v-model",
value: (title), //vm.title
expression: "title"
}
],
domProps: {
"value": (title) //vm.title
},
on: {
"input": function ($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}
),
_v(" "),
_c(
'button',
{
on: { "click": add } //vm.add
},
[
_v("submit")
]
)
]
),
_v(" "),
_c(
'p',
[
_c(
'ul',
_l(
(list), function (item) {
return _c(
'li',
[
_v(_s(item))
]
)
}
)
)
]
)
]
)
}Dies ist die Renderfunktion, die zum Rendern verwendet wird
vm._update(Vnode) {
const prevVonde=vm._Vnode
vm._Vnode=Vnode;
if(!prevVnode) { //如果没有之前的vnode，第一次渲染
vm.$el=vm._patch_(vm.$el,Vnode)
}else {
vm.$el=vm._patch_(prevVnode,Vnode)
}
}
function updataComponent() {
//vm._reander就是解析模板的rende函数，返回了一个vnode
vm._update(vm._render())
}Der vm_.patch_ hier enthält den komplexen Diff-Algorithmus. Das Rendern basiert auf Unterschieden im DOM. Es verwendet viele rekursive Aufrufe und bringt viele Effizienzprobleme mit sich. Die schnellsten Kampfkünste der Welt können nicht gebrochen werden.
Das obige ist der detaillierte Inhalt vonDreistufige Erklärung der Vue-Implementierung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
