Vue updated 生命周期钩子

实例

每次更新 DOM 树时，使用 updated 生命周期钩子向控制台写入一条消息。

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 更新后运行代码。

关联页面

Vue 教程: Vue 生命周期钩子

Vue 教程: beforeUpdate 钩子

Vue 参考引用: Vue beforeUpdate 生命周期

Vue 参考引用: Vue $nextTick() 方法