vue 实现挂载
Vue 实现挂载的基本方法
在 Vue 中，挂载是将 Vue 实例与 DOM 元素关联的过程。以下是常见的挂载方式：
使用 el 选项
通过 el 选项指定挂载目标，Vue 实例会自动将模板渲染到该 DOM 元素中。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});使用 $mount 方法
手动调用 $mount 方法实现挂载，适用于需要延迟挂载的场景。
const vm = new Vue({
data: {
message: 'Hello Vue!'
}
});
vm.$mount('#app');动态挂载的实现
动态挂载适用于需要根据条件或异步操作决定挂载目标的情况。
动态选择挂载目标 通过条件判断或异步操作动态设置挂载目标。
const vm = new Vue({
data: {
message: 'Dynamic Mount'
}
});
setTimeout(() => {
vm.$mount('#app');
}, 1000);挂载到非 DOM 元素 Vue 实例可以挂载到非 DOM 元素，例如文档片段（DocumentFragment）。
const fragment = document.createDocumentFragment();
const vm = new Vue({
data: {
message: 'Fragment Mount'
}
});
vm.$mount(fragment);挂载与模板的关系
内联模板
通过 template 选项直接定义模板内容，Vue 会将其编译并挂载到目标元素。
new Vue({
el: '#app',
template: '<div>{{ message }}</div>',
data: {
message: 'Inline Template'
}
});外部模板
通过 template 选项引用外部 HTML 内容，或使用单文件组件（SFC）。
new Vue({
el: '#app',
template: '#template-id',
data: {
message: 'External Template'
}
});挂载后的生命周期
挂载完成后会触发 mounted 生命周期钩子，可以在此阶段执行 DOM 操作或异步请求。
new Vue({
el: '#app',
data: {
message: 'Mounted Hook'
},
mounted() {
console.log('Component is mounted');
}
});注意事项
- 确保挂载目标存在于 DOM 中，否则会抛出错误。
- 避免重复挂载同一实例，可能导致意外行为。
- 在服务端渲染（SSR）中，挂载行为与客户端不同，需遵循特定规则。
