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组件时使用。

Here's a working fiddle for that example.

如何更改Vue更新钩子？

1 个答案: