一、Vue mounted 生命周期的原理
什么是 mounted 生命周期
在 Vue 的生命周期中，mounted 是一个钩子函数，专门在组件实例挂载到 DOM 之后触发。DOM 已就绪是该阶段的核心特征，使你能对真实渲染后的元素进行操作。
它的作用是为后续的交互、动画和第三方库初始化等提供稳定的入口。数据准备完成后再进入，也可以在 mounted 内发起异步请求，使首次渲染更贴近用户体验。
export default {mounted() {// 访问真实的 DOMconsole.log(this.$el); // 根元素const box = this.$refs.box;if (box) box.focus?.();}
}触发时机与执行顺序
在 Vue 的完整挂载流程中，通常依次经过 beforeMount、mounted 两个阶段，模板已被编译并挂载到 DOM。
如果你需要先进行数据准备再渲染，通常在 mounted 内发起异步请求，数据返回后通过 数据驱动渲染 完成页面更新，以确保首屏可用。
export default {beforeMount() { console.log('beforeMount'); },mounted() { console.log('mounted'); // 这里 DOM 已经可用 }
}二、Vue 2 与 Vue 3 的 mounted 实现差异
Vue 2 的 Options API 中的 mounted
在 Vue 2 的 Options API 里，挂载钩子被定义在 mounted() 中，this 指向当前组件实例，因此你可以通过 this.$refs 访问模板中的 DOM 引用。
通过 this.$el 可以获取根元素的引用，结合模板中的 ref 属性，可以灵活地对页面元素执行初始化逻辑。
export default {mounted() {// Vue 2 Options APIconst el = this.$refs.box;if (el) el.focus();}
}Vue 3 的 Composition API 中的 onMounted
在 Vue 3 中，使用 Composition API 时，可以在 setup() 中通过 onMounted() 实现相同的行为，且可以更灵活地组合逻辑。
通过返回的响应式引用，可以实现对模板中 DOM 的安全访问，避免了对 this 的依赖，从而提升代码组织性和可维护性。
import { onMounted, ref } from 'vue';
export default {setup() {const inputRef = ref(null);onMounted(() => {inputRef.value?.focus();});return { inputRef };}
}三、在实际开发中的应用场景
在 mounted 中访问 DOM 与尺寸获取
当你需要获取某个元素的尺寸、位置信息或触发基于布局的逻辑时，mounted 是合适的时机，因为此时模板已渲染到页面。
通常会通过 ref 将 DOM 节点暴露给逻辑层，在 mounted 中读取 getBoundingClientRect、offsetHeight 等属性以实现自适应布局。