Trois étapes d'implémentation de vue (avec code)

Le contenu de cet article concerne l'explication en trois étapes de l'implémentation de Vue (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Vue est un framework populaire aujourd'hui. Il peut effectuer une liaison bidirectionnelle de données. Pourquoi vue est-il si populaire ? Les raisons que je connais sont à peu près les suivantes ?

1. L'opération traditionnelle de modification de la structure dom est une opération très inutile (c'est-à-dire lente)
2. Mettre la logique de modification de la structure dom dans la couche js peut améliorer les performances.
3. La séparation des données et de la vue est plus conforme à la programmation orientée objet. L'implémentation de mvvm

vue est également implémentée en utilisant un dom virtuel comme React. rendu via des modèles utilisant js Le dom résultant.

Les étapes pour implémenter vue sont probablement ces trois étapes :

1 Réactivité : comment vue surveille-t-elle les modifications de chaque valeur d'attribut de dota ?
2. Moteur de modèle : comment le modèle de Vue est-il analysé et comment les instructions sont-elles traitées ?
3. Rendu du modèle : Comment ajouter les données dans data au modèle et les restituer en HTML ?

Étape 1 : Réactivité

La mise en œuvre de la réactivité repose principalement sur la méthode d'un objet :

Object.defineProperty

Cette méthode peut surveiller les changements dans les attributs de l'objet et effectuer un traitement logique

le dôme est le suivant :

    var obj={}
    var _name ='zhangsan'
    Object.defineProperty(obj,'name',{
        get:function() {
            console.log('get')
            return _name
        },
        set: function(newVal) {
            console.log('set')
            _name=newVal
        }
    })

Ici, vous modifiez la valeur du nom ou nom d'accès La valeur aura des informations imprimées

et l'implémentation de la simulation dans vue est probablement comme ceci :

        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)  //闭包处理
        }

En fait, les étudiants qui ont étudié Java doivent être familiers avec cela. la classe java Vous pouvez générer directement des méthodes get et set

Étape 2 : Analyser le modèle

Le modèle doit être converti en code js car :
Jugement logique (v-if. , v-for ), il doit être implémenté en utilisant js
2. Le rendu du dom virtuel doit être implémenté en utilisant js. (fonction de rendu)

Modèle 1

    <div id="app">
        <p>{{price}}</p>
    </div>

Rendu converti par le modèle 1

           with(this) { //this就是vm
                return _c(
                    'p',
                    {
                        attrs:{'id':'app'}
                    },
                    [
                        // _c是createElement
                        // _v是createTextVNode
                        // _s是toString方法
                        _c('p',[_v(_s(price))])
                    ]
                )
            }

Modèle 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>

Converti par le modèle 2 render

           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))
                                                ]
                                            )
                                        }
                                    )
                                )
                            ]
                        )
                    ]
                )
                 }

Il s'agit de la fonction de rendu utilisée pour le rendu

Étape 3 : Ajoutez le modèle aux données et restituez-le en 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())
}

Le vm_. patch ici _Il y a un algorithme de comparaison complexe à l'intérieur. Le rendu est basé sur des différences dans le DOM. Il utilise de nombreux appels récursifs et implique de nombreux problèmes d'efficacité. Les arts martiaux les plus rapides du monde ne peuvent pas être brisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!