vue 实现挂载
挂载 Vue 实例的基本方法
在 Vue 中，挂载是指将 Vue 实例与 DOM 元素关联的过程。通过挂载，Vue 可以控制指定的 DOM 区域并渲染模板。
new Vue({
el: '#app',
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
}
})el 属性指定挂载目标，可以是 CSS 选择器字符串或 DOM 元素对象。Vue 实例会接管这个 DOM 元素及其内部内容。
延迟挂载的方式
当需要稍后挂载 Vue 实例时，可以省略 el 选项，使用 $mount 方法手动挂载：
const vm = new Vue({
template: '<div>{{ message }}</div>',
data: {
message: 'Hello Vue!'
}
})
// 稍后手动挂载
vm.$mount('#app')$mount 方法同样接受 CSS 选择器字符串或 DOM 元素作为参数。如果未提供参数，将创建一个未挂载的 DOM 元素。
运行时编译与预编译
使用 template 选项时，Vue 需要在运行时编译模板。对于生产环境，推荐使用预编译的渲染函数：
new Vue({
el: '#app',
render(h) {
return h('div', this.message)
},
data: {
message: 'Hello Vue!'
}
})渲染函数 render 直接返回虚拟 DOM 节点，避免了运行时编译的开销，更适合性能敏感场景。
挂载到 body 或 html 的注意事项
Vue 通常不建议直接挂载到 <body> 或 <html> 元素上，因为这可能导致与其他库冲突。最佳实践是挂载到 body 内的特定容器元素：
<body>
<div id="app"></div>
</body>new Vue({
el: '#app',
// 配置项
})服务端渲染的特殊处理
在服务端渲染(SSR)场景中，挂载行为有所不同。需要使用 hydrate 选项来激活静态标记：
// 客户端入口文件
const app = new Vue({
// 配置项
})
app.$mount('#app', true) // 第二个参数开启 hydration服务端渲染需要配合特定的构建配置和入口文件结构，确保客户端能够正确激活服务端生成的静态 HTML。
