Wie erhalten Sie Änderungen in Vue aktualisiert Hook?

Wenn ich eine Vue Komponente wie haben:Wie erhalten Sie Änderungen in Vue aktualisiert Hook?

<script> 
    export default { 
    updated() { 
     // do something here... 
    } 
    }; 
</script>

es ohnehin die Änderungen zu erhalten, die in dem Update geführt? Wie, wie watch Hooks Argumente für vorherige und nächste Daten akzeptieren?

watch: { 
    someProp(next, prev) { 
    // you can compare states here 
    } 
}

Reagieren scheint dies in componentDidUpdate Haken zu tun, so dass ich Vue gehe davon hat etwas ähnliches, aber ich könnte falsch sein.

Quelle

2017-05-03 Rob

Uhr empfängt nächsten und zurück Zustand um die Änderungen zu überprüfen, die im Update geführt, so sieht es aus wie das ist, was Sie brauchen. Es sei denn, Sie denken im DOM Änderungen. In diesem Fall können Sie dom mit den cycle hooks beforeUpdate() und updated() vergleichen. ist das was du brauchst? –

Ich hatte gehofft, eine Art Liste von Änderungen in der 'update()' Hook zu bekommen. Ist das möglich? – Rob

Ich weiß nicht genug, um zu antworten, sorry. Es könnte oldvnode und neuen vnode injizieren, versuchen Sie, aktualisiert (oldVnode, vNode) {console.log (oldVnode); } und sehen, was passiert. –

Der Lifecycle-Hook updated liefert keine Informationen darüber, wodurch die Instanz der Vue-Komponente aktualisiert wurde. Der beste Weg, auf Datenänderungen zu reagieren, ist die Verwendung von Beobachtern.

Wenn Sie jedoch untersuchen möchten, was ein Update für Debugging-Zwecke verursacht hat, können Sie einen Verweis auf den Status der Vue-Instanzdaten speichern und diesen beim Aktualisieren mit dem Status vergleichen.

Hier ist ein Beispiel-Script lodash mit dem Namen der Eigenschaft zu protokollieren, die die Update-Auslösung geändert:

updated() { 
    if (!this._priorState) { 
    this._priorState = this.$options.data(); 
    } 

    let self = this; 
    let changedProp = _.findKey(this._data, (val, key) => { 
    return !_.isEqual(val, self._priorState[key]); 
    }); 

    this._priorState = {...this._data}; 
    console.log(changedProp); 
},

Dies funktioniert, weil Objekte mit einem Unterstrich vorangestellt für die interne Verwendung reserviert und sind nicht für Bindung. Dies könnte in einem Mix gespeichert werden, das immer dann verwendet wird, wenn Sie eine Vue-Komponente auf diese Weise debuggen müssen.

Here's a working fiddle for that example.

Quelle

2017-05-25 03:48:58 thanksd

Wie erhalten Sie Änderungen in Vue aktualisiert Hook?

Antwort

Verwandte Themen