码农教程 - 一技在手,衣食无忧! tools

Vue updated 生命周期挂钩

❮ 上一节 Vue 生命周期钩子参考 下一节 ❯

示例

使用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() 方法


❮ 上一节 Vue 生命周期钩子参考 下一节 ❯