How do I get the changes in the updated Vue client?
If I have a Vue component like:
<script>
export default {
updated() {
// do something here...
}
};
</script>
Is there anyway to get the changes that led to the update? How, how do watch
hooks take arguments for previous and next data?
watch: {
someProp(next, prev) {
// you can compare states here
}
}
React seems to do it in componentDidUpdate
hooks, so I'm guessing Vue has something similar, but I might be wrong.
source to share
The updated
lifecycle hook does not provide any information about what caused the Vue component instance to update. The best way to react to data changes is to use observers.
However, if you're trying to figure out what caused the update for debugging purposes, you can keep a reference to the data state of the Vue instance and compare it to the state when updated.
Here is an example script using lodash to register the changed property name that triggers the update:
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);
},
This works because properties added with an underscore are reserved for internal use and are not available for binding. This can be stored in a mixin for use when you need to debug your Vue component this way.
source to share