How do I get the changes in the updated Vue client?

Question

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.

+3

javascript vue.js

Rob 03 May '17 at 15:19

source to share

1 answer

thanksd · Answer 1 · 2017-05-25T03:48:58+0000

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.

Here's the fiddle at work for this example.

How do I get the changes in the updated Vue client?

More articles: