beforeUpdate与updated

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

beforeUpdate

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

updated

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

Composition API

import { onBeforeUpdate, onUpdated } from 'vue'

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

使用注意

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

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

典型用途

要点总结

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