Vue3的onMounted怎么用？新手容易踩的3个大坑+进阶技巧全讲透

Vue3里的onMounted到底是什么来头？

在正式上手用之前,得先搞懂它的“身份”——它是Vue3组合式API里最常用的生命周期钩子函数之一，你可以把它理解成组件的“成年礼”触发开关：当组件的所有DOM元素（也就是页面上能看到的那些按钮、图片、文字框这类实实在在的东西）都渲染、挂载、插入到浏览器的页面树（DOM树）之后，这个钩子就会“叮”一声响，立刻执行你在里面写的代码。

为什么要有这个钩子？举个最直观的例子：你在组件里写了一个canvas绘图的代码，如果把绘图逻辑放在组件刚初始化的setup函数开头，那时候canvas元素还没“出生”（也就是还没挂载到DOM里），JS根本找不到那个canvas的DOM节点，代码肯定报错，这时候就需要把绘图逻辑塞到onMounted里，等canvas“落地”了再调用。

和Vue2里的mounted生命周期有啥区别？其实核心作用一模一样，但写法完全不一样：Vue2是选项式API，mounted是作为对象的一个键写在export default里的；而Vue3是组合式API，onMounted是从vue包里import进来的函数，然后直接在setup函数（或者