如何在VUE更新挂钩中更改

Question

如果我有一个类似的vue组件：

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

无论如何是否有会导致更新的更改？就像watch钩如何接受上一个数据和下一个数据的参数吗？

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

React似乎在componentDidUpdate钩子中这样做，所以我假设Vue有类似的东西，但我可能是错误的。

Answer 1

updated Lifecycle Hook没有提供有关导致VUE组件实例更新的原因。对数据更改做出反应的最佳方法是使用观察者。

但是，如果您试图调查原因是为了调试目的引起的更新，则可以存储对Vue实例数据状态的引用，并在更新时将其与状态进行比较。

这是使用lodash来记录更改的属性名称的示例脚本，触发了更新：

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

这起作用是因为用下划线字符预先预留的属性保留用于内部使用，并且不能用于绑定。可以将其保存在Mixin中，以便在需要以这种方式调试Vue组件时使用。

这是一个示例的工作小提琴。