Lernen und verstehen Sie gemeinsam den Vue-Quellcode

Laut der offiziellen Website von Vue können wir wissen, dass Vue ein MVVM-Framework ist und reagiert. Um die Bedeutung besser zu verstehen, habe ich eine einfache MVVM-Lerndemo implementiert. Teilen Sie es unten mit allen und laden Sie alle ein, darüber zu diskutieren.

1. Der in mvvm enthaltene Mindestinhalt

1. Befehlssatz, wie zum Beispiel: Text, Modell usw.

2. Datenmodell und Interaktionsdaten anzeigen

3. Komponentenunterstützung: Das heißt, dynamische Aktualisierung eines Teils des HTML-Codes

2. Meine Implementierung

1. Definition von Variablen und Implementierung der Uhr

var directives = {}; //指令集合var vNodes = new Array(); //解析的Dom集合var dataModel = {
    name:"name",
    title: "title"}; //数据Modelvar Watch = {
    isInit: false,
    watchs: new Array(),
    run: function(newValue, expOrfn){ var self = this;if(!self.isInit){
            expOrfn.call(vModel);
        }this.watchs.map(function(data,index){
            data.nodes.map(function(d,i){if(self.isInit){
                    d.directive.init(newValue, d, data); //绑定初始化值， 以及初始化一些事件}else{
                    d.directive.update(newValue, d, data); //只更新值，此时run的调用来值value-set                }
            });
        });
        
        self.watchs = [];
    },
    push:function(watch){this.watchs.push(watch);
    }
} //任务管理

Erklärung:

1. Watch Die Push-Methode wird zum Hinzufügen von Abhängigkeiten verwendet und anschließend ausgeführt, um alle Abhängigkeiten auszuführen. Nach Abschluss der Ausführung muss die aktuelle Abhängigkeitssammlung bereinigt werden. Die Sammlung von Abhängigkeiten in Vue wird in Dep abgeschlossen und die Aufgabenverwaltung wird von Watch bereitgestellt (Ich weiß nicht, ob ich es richtig verstehe)

2. Definition der Anweisungen

directives.text = { 
    init: function(value, vNode){
        vNode.elm.textContent = value;
    },
    update: function(value, vNode){
        vNode.elm.textContent = value;
    }
}//需要响应事件的怎么办directives.model ={ 
    init: function(value, vNode, _watch){
        vNode.elm.value = value; //判断自己发生的改变，不应该再改变自己 vNode.elm.addEventListener('keyup',function(evt){
            vNode.model[_watch.key] = vNode.elm.value;
        }); 
    },
    update:function(){

    }   
}

Beschreibung:

1. Da es sich um ein Demo-Lernbeispiel handelt, nur einfacher Text und Modell sind definiert, Text: wird für die Datenanzeige verwendet und Modell wird für die Eingabe (Eingabefeld)-Antwort verwendet

3 🎜 >

Hinweis:

//转换vModel，暂支持一级var properties = Object.getOwnPropertyNames(dataModel);var vModel = {}, formSetting = false;for( var index in properties){ 
    (function refreshData(_index){var key = properties[_index];var property = Object.getOwnPropertyDescriptor(dataModel, key);var setter = property.set;var getter = property.get;var _val = property.value;var _getter = function(){var val = getter ? getter.call(vModel) : _val;//收集依赖，与watch要分开            Watch.push({
                key: key,
                nodes: vNodes.filter(function(data,index){return data.modelKey == key ? true : false;
                }),
                getter: _getter
            });return val;
        };
        Object.defineProperty(vModel, key, {
            configurable: true,
            enumerable: true,
            set: function(value){if(setter){
                    setter.call(vModel, value);
                } //处理依赖                Watch.run(value, _getter);//this.value = value;            },
            get: _getter

        })
    })(index);
}

vModel wird basierend auf dataModel generiert, dh die Get- und Set-Methoden jedes Attributs werden angepasst, was auch mithilfe eines Proxys in es6 implementiert werden kann (

Hast du recht?

1. ). Beim Festlegen eines Attributs wird zuerst die get-Methode aufgerufen, um Abhängigkeiten zu sammeln. Nachdem der Komfortwert geändert wurde, können alle betroffenen Inhalte geändert werden.

2. 4. Dom als vNode analysieren

Anleitung:

//解析vNodesvar app = document.getElementById('app');
app.childNodes.forEach(function(data,index){if(data.nodeType != 1) return;var hv = data.getAttribute('data-hv');var hvs = hv.split(',');
    hvs.forEach(function(item,row){var keyValue = item.split(':'); //vNode对象上一定要有model，这是方便vNode相应时候的找vModel        vNodes.push({
            directive: directives[keyValue[0]],
            modelKey: keyValue[1],
            model: vModel,
            elm: data
        });
    });
});

Hier reden wir Informationen zum Parsen Für vNode ist es sehr weit hergeholt, da es nur die von data-hv auf dem Dom angegebenen Anweisungen sammelt und die entsprechenden Anweisungen, Elemente, vModel usw. in einem Objekt in vNodes für die get-Methode jedes Attributs speichert von vModel zum Sammeln von Abhängigkeiten.

1. 5. Erste Initialisierung

Anweisungen:

//调用所有的get一次Watch.isInit = true;var _keys = Object.getOwnPropertyNames(vModel);
_keys.map(function(key,data){var data = vModel[key];
    Watch.run(data); 
});
Watch.isInit = false;

Der Wert wird initialisiert von vModel wird an den Dom gerendert. Hier wird jeder Get aktiv ausgeführt und dann die watch.run-Methode ausgeführt.

1. Ich habe das Gefühl, dass das Design und die Implementierung hier nicht mit den Vorstellungen von vue übereinstimmen. Wenn jemand dies sieht, geben Sie mir bitte einige Ratschläge und Anleitungen.

2. 6. Geparster Dom

Das obige ist der detaillierte Inhalt vonLernen und verstehen Sie gemeinsam den Vue-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!