beforeUpdate与updated

这两个钩子处理组件更新阶段的逻辑。

beforeUpdate

JavaScript

export default {
  beforeUpdate() {
    // 数据已变化，DOM 尚未更新
    console.log(this.message) // 新值
    console.log(this.$el.textContent) // 旧值
  }
}

updated

JavaScript

export default {
  updated() {
    // DOM 已根据新数据更新
    console.log(this.$el.textContent) // 新值
  }
}

Composition API

JavaScript

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('即将更新')
    })
    
    onUpdated(() => {
      console.log('已更新')
    })
  }
}

使用注意

避免在 updated 中更改状态，可能导致无限更新循环。

JavaScript

// 错误示例
updated() {
  this.count++ // 会再次触发 updated
}

典型用途

钩子	时机	典型用途
beforeUpdate	DOM 更新前	获取更新前的 DOM 状态
updated	DOM 更新后	操作更新后的 DOM

要点总结

beforeUpdate 数据变化但 DOM 未更新
updated DOM 已根据新数据更新
避免在 updated 中更改状态
Composition API 使用 onBeforeUpdate 和 onUpdated