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