Vue 'updated' 生命周期钩子
示例
使用 updated 生命周期钩子在每次 DOM 树更新时向控制台写入消息。
export default {
data() {
return {
sliderVal: 50,
renderCount: 0
}
},
updated() {
this.renderCount++;
console.log('Updated ' + this.renderCount + ' times.')
}
}
定义和用法
The updated 生命周期钩子在 DOM 树更新之后立即发生。
如果我们在 updated 钩子中修改属性或执行其他触发新渲染的操作，updated 钩子将在该新渲染之后再次被调用，并且我们很可能创建了一个无限循环。
为了避免无限循环，我们应该始终考虑使用 beforeUpdate 生命周期钩子而不是 updated 生命周期钩子。
The this.$nextTick() 或 nextTick() 函数也可以用来在 DOM 更新后运行代码。
注意： 在上面的示例中，我们将渲染计数写入控制台，因为对视图进行更改将重新激活 updated 钩子并创建一个无限循环。
相关页面
Vue 教程：Vue 生命周期钩子
Vue 教程：'beforeUpdate' 钩子
Vue 参考：Vue 'beforeUpdate' 生命周期钩子
Vue 参考：Vue $nextTick() 方法
