vue 实现挂载
Vue 实现挂载的核心方法
在 Vue 中，挂载是将 Vue 实例与 DOM 元素关联的过程，通常通过 mount 方法完成。以下是常见的实现方式：
使用 createApp 和 mount
import { createApp } from 'vue';
const app = createApp({
data() {
return { message: 'Hello Vue!' };
}
});
app.mount('#app'); // 挂载到 id 为 app 的 DOM 元素手动挂载未编译模板
const vm = new Vue({
template: '<div>{{ message }}</div>',
data: { message: 'Hello!' }
}).$mount('#app'); // 等价于 el: '#app'延迟挂载
const vm = new Vue({
data: { message: 'Delayed mount' }
});
vm.$mount(); // 不传参数时返回实例
document.getElementById('app').appendChild(vm.$el);挂载的生命周期
挂载过程会触发以下生命周期钩子：
beforeCreate：实例初始化后调用created：实例创建完成beforeMount：挂载开始前mounted：挂载完成后调用
动态挂载场景
对于需要动态创建的组件：
import { createApp } from 'vue';
import DynamicComponent from './Dynamic.vue';
const mountComponent = (targetElement) => {
const app = createApp(DynamicComponent);
app.mount(targetElement);
return app;
};服务端渲染注意事项
SSR 环境下应避免使用客户端专用代码：
if (typeof window !== 'undefined') {
app.mount('#app');
}卸载实例
需要销毁实例时：
const app = createApp(App);
const vm = app.mount('#app');
// 卸载操作
app.unmount();常见问题解决
挂载目标不存在 确保 DOM 已加载完成：
document.addEventListener('DOMContentLoaded', () => {
app.mount('#app');
});多次挂载警告 同一实例不应重复挂载，需先卸载旧实例。
组件未注册 全局或局部注册组件后再挂载：
app.component('my-component', {...});
