简述什么时候调用 “updated” 生命周期 hook ? ?
参考答案:
在 Vue.js 中,updated
生命周期钩子在组件的 DOM 更新后立即被调用。这意味着当组件的数据发生变化并导致虚拟 DOM 重新渲染和更新为实际的 DOM 后,updated
钩子就会被触发。
具体来说,当以下情况发生时,updated
钩子会被调用:
- 组件的数据(
data
)发生变化,导致组件重新渲染。 - 组件的 props 发生变化,导致组件重新渲染。
- 使用
this.$forceUpdate()
方法强制更新组件。
请注意,updated
钩子并不包括初次渲染时的 DOM 更新,仅在后续的更新中才会触发。此外,如果你在这个钩子中再次修改数据,可能会导致无限循环的更新,因此需要谨慎使用。
下面是一个简单的示例,展示了 updated
钩子的使用:
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
updated() {
console.log('Component updated!');
// 这里可以执行一些在 DOM 更新后需要执行的操作
}
};
在这个示例中,每当 message
数据发生变化并导致组件重新渲染后,控制台就会输出 "Component updated!"。