Introduction au principe de réactivité de vue et à la collection de dépendances (avec code)

Ce que cet article vous apporte est une introduction aux principes réactifs et à la collection de dépendances 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 surveille les modifications des données en définissant les méthodes setter/getter des propriétés de l'objet et collecte les dépendances via des getters. Chaque méthode setter est un observateur, informant les abonnés de mettre à jour la vue lorsque les données changent.

Transformez les données en observables

Alors, comment Vue rend-elle toutes les propriétés sous les données observables ?

function obsever(value,cb){
    Object.keys(value).forEach((key)=>defineReactive(value,key,value[key],cb))
}
function defineReactive(obj,key,val,cb){
    Object.defineProperty(obj,key,{
        enumerable;true,
        configurable:true,
        get:()=>{
            /*依赖收集*/
            return val;
        },
        set:newVal=>{
            val=newVal;
            cb();
        }
    })
}
class Vue{
    constructor(options){
        this._data = options.data;
        obsever(this._data,options.render)
    }
}

let app = new Vue({
    el:'#app',
    data:{
        text:'text',
        text2:'text2'
    },
    render(){
        console.log('render')
    }
})

Afin de faciliter la compréhension, considérons d'abord le cas le plus simple, sans considérer les tableaux et autres situations. Le code est tel qu'indiqué ci-dessus. Dans initData, la fonction observer sera appelée pour définir les données Vue comme observables. Lorsque les données _data changent, set sera déclenché et un rappel sera effectué à l'abonné (rendu dans ce cas).
Ensuite, le problème survient, app._data.text doit être utilisé pour déclencher l'ensemble. Pour être paresseux, nous avons besoin d'un moyen pratique pour déclencher l'ensemble pour redessiner la vue en la définissant directement via app.text. Ensuite, vous devez vous rendre chez un agent.

Proxy

Nous pouvons exécuter un proxy proxy pour les données dans le constructeur de Vue. De cette façon, nous transmettons les attributs des données à l'instance de machine virtuelle.

_proxy.call(this,options.data);//构造函数
//代理
function _proxy(data){
    const that = this;
    Object.keys(data).forEach(key=>{
        configurable:true,
        enumerable:true,
        get:function proxyGetter(){
            return that._data[key]
        },
        set:function proxySetter(val){
            that._data[key] = val;
        }
    })
}

Nous pouvons utiliser app.text au lieu de app._data.text.

Pourquoi s'appuyer sur la collection

Regardez d'abord le code suivant

new Vue({
    template:`<p>
                <span>text1:</span>{{text1}}
                <span>text2:</span>{{tetx2}}
              </p>`,
    data:{
        text1:'text1',
        text2:'text2',
        text3:'text3'
    }
})

Lier selon la méthode du principe réactif ci-dessus Il y aura un problème - text3 n'est pas utilisé dans le modèle réel. Cependant, lorsque les données de text3 sont modifiées, le setter de text3 sera également déclenché, provoquant la réexécution du rendu. C'est évidemment incorrect.

Parlons d'abord de Dep

Lorsque la valeur de l'objet sur les données est modifiée, son setter sera déclenché Puis lorsque la valeur sera obtenue, le getter. l'événement sera naturellement déclenché. Ainsi, tant que nous effectuons un rendu au début, toutes les données dont dépend le rendu seront collectées par le getter dans les sous-marins de Dep. Lors de la modification des données dans data, le setter déclenchera uniquement la fonction subs de Dep.
Définissez un Dep qui dépend de la classe de collection.

class Dep{
    constructor(){
        this.subs = [];
    }
    addSub(sub:Watcher){
        this.subs.push(sub)
    }
    removeSub(sub:Watcher){
        remove(this.subs,sub)
    }
    notify(){
        const subs = this.subs.slice()
        for(let i = 0;l=subs.length;i<1;i++){
            subs[i].update()
        }
    }
}
function remove(arr,item){
    if(arr.length){
        const index = arr.indexOf(item)
        if(index>-1){
            return arr.splice(index,1)
        }
    }
}

Watcher

L'abonné, lorsque les dépendances sont collectées, ajoutera un sous au sous, et lorsque les données dans data seront modifiées, la notification de l'objet dep sera être déclenché. Notifier à tous les objets Watcher de modifier les vues correspondantes.

class Watcher {
    constructor (vm, expOrFn, cb, options) {
        this.cb = cb;
        this.vm = vm;

        /*在这里将观察者本身赋值给全局的target，只有被target标记过的才会进行依赖收集*/
        Dep.target = this;
        /*Github:https://github.com/answershuto*/
        /*触发渲染操作进行依赖收集*/
        this.cb.call(this.vm);
    }

    update () {
        this.cb.call(this.vm);
    }
}

Démarrer la collecte des dépendances

class Vue {
    constructor(options) {
        this._data = options.data;
        observer(this._data, options.render);
        let watcher = new Watcher(this, );
    }
}

function defineReactive (obj, key, val, cb) {
    /*在闭包内存储一个Dep对象*/
    const dep = new Dep();

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            if (Dep.target) {
                /*Watcher对象存在全局的Dep.target中*/
                dep.addSub(Dep.target);
            }
        },
        set:newVal=> {
            /*只有之前addSub中的函数才会触发*/
            dep.notify();
        }
    })
}

Dep.target = null;

Attribuez l'instance Watcher au Dep.target global, puis déclenchez l'opération de rendu. Seules celles marquées par Dep.target seront dépendantes. collecter. L'objet avec Dep.target poussera l'instance Watcher vers les subs Lorsque l'objet est modifié et déclenchera l'opération de définition, dep appellera la méthode de mise à jour de l'instance Watcher dans les subs pour le rendu.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

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!