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

Clé*_*ops 10 vue.js

我发现了VueJS,我并不完全理解updated和观察者之间的区别.

更新了钩子

这是一个生命周期的钩子.根据官方文档,只要数据发生变化,就会触发它.因此,无论何时更新a prop或a data(值,而不仅仅是指针),都会updated被调用.

看守

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

看起来在这两种情况下,调用回调时DOM都不会更新(nextTick()如果我们想要操纵DOM中的更改,则需要更新).我看到的唯一区别watchers是只有当一个精确属性(或数据)被更新时才会触发,其中updated总是被调用.

updating如果我们可以更准确(watchers),我无法弄清楚数据何时更改()更新的优点.

这是我的想法.

谢谢 :)

Roy*_*y J 12

生命周期钩子更新响应DOM中的更改.观察者回应数据的变化.DOM更改通常是对数据更改的响应,但它们可能不是相关组件所拥有的数据.updated可以使用的一个示例是注意到插槽内容已更新.

  • @TheFool 重点是观察者响应数据更改,而更新的钩子在 DOM 更改后调用。这就是区别。这仍然是文档所说的。 (2认同)

Nat*_*les 7

我认为对观察者更好的类似生命周期挂钩可能是beforeUpdate挂钩。该updated钩被称为虚拟DOM有重新呈现,而beforeUpdate被称为虚拟DOM有重新呈现。您可以在链接到的图表上看到它的直观表示。


在哪种情况下,最好使用更新而不是监视程序?(...)updated如果我们可以更准确(watch),我就无法弄清楚每当数据更改()时进行更新的优点。

该文档说,您应该首选观察者或计算属性,而不是updated如果有可能以这种方式实现目标。我的理解是,updated包含该挂钩是为了允许用户监视虚拟DOM的任何更改(请参见下文)。


下面是从解释的Vue公司2.0版本说明watch主场迎战updated

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

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