Vue3的onUpdated钩子是干嘛的？怎么用才对？踩坑点有哪些？

之前有人分享过，Vue3的Composition API把原来的选项式生命周期打散成独立的钩子函数后，大家经常会把onMounted、onUpdated、watch、watchEffect搞混，特别是onUpdated，要么不知道什么时候该用，要么一用就触发死循环，要么不知道它和其他监听数据变化的东西有什么区别，今天就从最基础的问题开始,一步步拆解清楚。

先搞明白onUpdated的定义和触发时机

它是Vue3里专门用来处理DOM更新完成后的后续操作的Composition API钩子，在选项式API里对应的就是updated()选项，那什么时候算“DOM更新完成”呢？不是数据一变就触发，而是要等Vue的响应式系统把所有由数据变化导致的DOM修改（比如插值替换、属性更新、组件重新渲染子组件）都做完，浏览器也完成了布局和绘制（也就是重排重绘）之后,才会执行回调函数。

举个最直观的例子，比如你做了一个“点击按钮修改输入框高度”的功能，输入框的高度是通过ref绑定的响应式变量控制的，如果你想在高度改完之后，立刻让输入框获取焦点，就不能直接在修改高度的代码后面写focus()——因为那个时候Vue可能还没把新的高度应用到DOM上，focus()会无效，这时候用onUpdated钩子，等DOM完全更新了再调用focus(),就没问题了。

另外要注意，onUpdated的触发范围是当前组件及其所有子孙组件的DOM更新，只要有一个响应式数据变化导致了这个组件树里的DOM变动，就会触发，不是只监听当前组件的data/props/ref，这点和watch/watchEffect完全不一样,后面会专门对比。

onUpdated的基本写法和注意事项

在Composition API里用onUpdated，首先得从vue里导入它，然后在setup函数或者