VueJS中更新的钩子和观察者之间有什么区别？

Question

我发现VueJS并且我并不完全理解updated和观察者之间的差异。

更新了挂钩

这是一个生命周期的钩子。根据{{​​3}}，只要数据发生变化，就会触发它。因此，每当prop或data更新（值，而不仅是指针）时，都会调用updated。

俪

在文档中，将观察者与计算属性进行比较。但在哪种情况下最好使用更新而不是观察者？

似乎在两种情况下，调用回调时都不会更新DOM（如果我们想要操纵DOM中的更改，则需要nextTick()）。我看到的唯一区别是watchers仅在更新一个精确属性（或数据）时触发，其中始终调用updated。

如果我们可以更准确（updating），我无法确定数据发生变化时更新的优势（watchers）。

以下是我的想法。

谢谢：）

Answer 1

生命周期挂钩更新响应DOM中的更改。观察者回应数据的变化。 DOM更改通常是对数据更改的响应，但它们可能不是相关组件所拥有的数据。可以使用updated的一个示例是noticing that slot content has updated。

Answer 2

我认为对观察者来说更好的类似生命周期钩子可能是the beforeUpdate hook。 虚拟DOM重新渲染后，updated挂钩称为，而虚拟DOM重新渲染之前，beforeUpdate称为。您可以看到此on the diagram you linked to的可视化表示。

  

在哪种情况下最好使用更新而不是观察者？ （...）如果我们可以更准确（updated），我无法弄清楚数据发生变化时更新的优势（watch）。

The documentation says如果有可能以这种方式实现您的目标，您应该更喜欢观察者或计算属性而不是updated。我的理解是包含updated钩子以允许用户观察虚拟DOM的任何更改（见下文）。

以下是watch与updated the Vue 2.0 release notes的解释：

  

通过vm.$watch创建的用户观察者现在在相关组件重新渲染之前被触发。这使用户有机会在组件重新呈现之前进一步更新其他状态，从而避免不必要的更新。例如，您可以在支柱更改时观察组件支柱并更新组件自己的数据。

     

要在组件更新后对DOM执行某些操作，只需使用updated生命周期挂钩。