vue 实现挂载
Vue 实现挂载的基本方法
在 Vue 中，挂载是将 Vue 实例与 DOM 元素关联的过程。通过挂载，Vue 可以管理 DOM 并实现数据绑定和响应式更新。
创建 Vue 实例并挂载
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})el 选项指定挂载目标，可以是 CSS 选择器字符串或 DOM 元素。Vue 会将实例挂载到匹配的元素上。
延迟挂载
如果不立即指定 el 选项，可以稍后手动挂载：
const app = new Vue({
data: {
message: 'Hello Vue!'
}
})
// 稍后挂载
app.$mount('#app')挂载生命周期
挂载过程会触发以下生命周期钩子：
beforeCreate：实例初始化后，数据观测和事件配置之前调用created：实例创建完成后调用，已完成数据观测beforeMount：挂载开始之前调用mounted：实例被挂载后调用，此时 DOM 已更新
动态挂载与卸载
动态挂载
const Component = Vue.extend({
template: '<div>动态组件</div>'
})
// 创建并挂载组件实例
new Component().$mount('#dynamic-mount')卸载实例
app.$destroy()调用 $destroy() 会完全销毁实例，清理它与其他实例的连接，解绑所有指令及事件监听器。
服务端渲染中的挂载
在服务端渲染 (SSR) 场景中，挂载行为有所不同：
// 客户端激活
const app = new Vue({
ssr: true,
// 其他选项
})
// 仅客户端执行挂载
if (typeof window !== 'undefined') {
app.$mount('#app')
}挂载注意事项
- 挂载元素会被 Vue 生成的 DOM 替换，原内容会被覆盖
- 每个 Vue 实例只能挂载到一个 DOM 元素
- 根实例挂载后，其模板中的组件也会递归挂载
- 避免挂载到
<html>或<body>元素
