Einführung in das Vue-Responsivitätsprinzip und die Abhängigkeitssammlung (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Responsive-Prinzipien und die Abhängigkeitssammlung (mit Code). Freunde in Not können darauf zurückgreifen.

Vue überwacht Datenänderungen durch Festlegen der Setter-/Getter-Methoden von Objekteigenschaften und sammelt Abhängigkeiten durch Getter. Jede Setter-Methode ist ein Beobachter, der Abonnenten benachrichtigt, die Ansicht zu aktualisieren, wenn sich die Daten ändern.

Daten in beobachtbare verwandeln

Wie macht Vue also alle Eigenschaften unter Daten beobachtbar?

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

Um das Verständnis zu erleichtern, betrachten Sie zunächst den einfachsten Fall, ohne Arrays und andere Situationen zu berücksichtigen. Der Code ist wie oben gezeigt. In initData wird die Beobachtungsfunktion aufgerufen, um die Vue-Daten auf beobachtbar zu setzen. Wenn sich die _data-Daten ändern, wird set ausgelöst und ein Rückruf an den Abonnenten durchgeführt (in diesem Fall rendern).
Dann kommt das Problem, app._data.text muss bedient werden, um den Trigger zu setzen. Um faul zu sein, benötigen wir eine bequeme Möglichkeit, den Satz zum Neuzeichnen der Ansicht auszulösen, indem wir ihn direkt über app.text festlegen. Dann müssen Sie sich an einen Makler wenden.

Proxy

Wir können einen Proxy-Proxy für Daten im Konstruktor-Konstruktor von Vue ausführen. Auf diese Weise übertragen wir die Attribute der Daten an die VM-Instanz.

_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;
        }
    })
}

Wir können app.text anstelle von app._data.text verwenden.

Warum sich auf die Sammlung verlassen?

Schauen Sie sich zuerst den folgenden Code an

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

Die Bindung gemäß dem oben genannten Reaktionsprinzip wird angezeigt. Ein Problem - text3 ist nicht vorhanden Wenn jedoch die Daten von Text3 geändert werden, wird auch der Setter von Text3 ausgelöst, was dazu führt, dass das Rendering erneut ausgeführt wird.

Lassen Sie uns zuerst über Dep sprechen

Wenn der Wert des Objekts in den Daten geändert wird, wird sein Setter ausgelöst. Wenn der Wert erhalten wird, wird der Getter ausgelöst Das Ereignis wird natürlich ausgelöst, solange wir zu Beginn ein Rendering durchführen, werden alle Daten in den Daten, von denen das Rendering abhängt, vom Getter in den Subs von Dep gesammelt. Beim Ändern der Daten in Daten löst der Setter nur die Unterfunktion von Dep aus.
Definieren Sie eine Dep, die von der Sammlungsklasse abhängt.

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

Abonnent, wenn die Abhängigkeit erfasst wird, wird Sub zu Sub hinzugefügt. Wenn die Daten in Daten geändert werden, wird die Benachrichtigung des Dep-Objekts angezeigt Wird ausgelöst, um alle Watcher-Objekte zu benachrichtigen, die entsprechende Ansicht zu ändern.

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

Abhängigkeitserfassung starten

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;

Weisen Sie die Watcher-Instanz dem globalen Dep.target zu und lösen Sie dann den Rendervorgang aus. Nur durch Dep.target markierte Abhängigkeiten werden erfasst. Das Objekt mit Dep.target überträgt die Watcher-Instanz an subs. Wenn das Objekt geändert wird und den Setter-Vorgang auslöst, ruft dep die Aktualisierungsmethode der Watcher-Instanz in subs zum Rendern auf.

Das obige ist der detaillierte Inhalt vonEinführung in das Vue-Responsivitätsprinzip und die Abhängigkeitssammlung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!