如何在 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生命周期挂钩不提供什么导致了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 组件时使用。

这是该示例的工作小提琴。