Dreistufige Erklärung der Vue-Implementierung (mit Code)

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

Der zweite Schritt: Vorlage analysieren

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

Schritt 3: Rendern Sie die Vorlage plus Daten in HTML

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!