VueJS 中更新的钩子和观察者有什么区别? [英] What is the difference between updated hook and watchers in VueJS?

问题描述

我正在发现 VueJS，但我不完全理解 updated 和观察者之间的区别.

I'm discovering VueJS and I don't understand exactly the differences between updated and watchers.

这是一个生命周期钩子.根据官方文档，每当数据发生变化时都会触发.因此，每当 prop 或 data 更新(值，而不仅仅是指针)时，都会调用 updated.

It is a lifecycle hook. According to the official documentation, it is triggered whenever data changes. So whenever a prop or a data is updated (the value, not only the pointer), updated is called.

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

In the documentation, watchers are compared to computed properties. But in which cases would it be best to use updated instead of watchers ?

似乎在这两种情况下，调用回调时 DOM 都不会更新(如果我们要操作 DOM 中的更改，则需要 nextTick()).我看到的唯一区别是 watchers 仅在更新一个精确的属性(或数据)时触发，而 updated 总是被调用.

It seems that in both cases, DOM is not updated when the callback is called (nextTick() is required if we want to manipulate the changes in the DOM). The only difference I see is that watchers are only triggered when one precise property (or data) is updated where updated is always called.

如果我们可以更准确(watchers)，我无法弄清楚每当数据发生变化时更新(更新)的好处是什么.

I can't figure out what are the pros of updating whenever a data changes (updating) if we can be more accurate (watchers).

这是我的想法.

谢谢:)

推荐答案

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

The lifecycle hooks around update respond to changes in the DOM. Watchers respond to changes in the data. DOM changes are generally in response to data changes, but they might not be data owned by the component in question. One example where updated could be used is noticing that slot content has updated.

这篇关于VueJS 中更新的钩子和观察者有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！