onupdated 在组件响应式数据变化完成 dom 更新后执行，适合依赖最新 dom 的操作；子组件先于父组件触发，批量更新只触发一次，不可直接修改响应式数据，ssr 不执行。

onUpdated 用于在组件因响应式数据变化完成 DOM 更新后执行逻辑，适合处理依赖最新 DOM 的操作。

onUpdated 的触发时机和限制

它在虚拟 DOM 重新渲染并打补丁到真实 DOM 之后调用。注意：

• 子组件的 onUpdated 总是比父组件先执行
• 多个响应式更新会批量合并到一次渲染周期中，所以 onUpdated 不会为每次赋值都触发
• 不能在 onUpdated 内直接修改响应式数据，否则可能引发无限循环或警告
• 服务端渲染（SSR）期间不会执行

常见使用场景

典型用途包括 DOM 布局测量、第三方库同步、滚动位置恢复等：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 获取更新后元素的实际尺寸或位置（如 el.getBoundingClientRect()）
• 在列表更新后聚焦某个新插入的输入框
• 调用图表库的 chart.update() 方法刷新视图
• 配合 nextTick 确保 DOM 已就绪（尤其在异步更新后）

基础写法与注意事项

必须在 setup() 或 <script setup></script> 中同步调用：

<script setup><br> import { onUpdated, ref } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> const list = ref([])<br> <br> onUpdated(() => {<br> console.log('DOM 已更新')<br> const lastItem = document.querySelector('.item:last-child')<br> if (lastItem) lastItem.scrollIntoView({ behavior: 'smooth' })<br> })<br> </script>

若需在某次特定更新后操作 DOM，且该更新由异步逻辑触发，建议搭配 nextTick 使用，避免读取到旧的 DOM 状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！