vue 挂载

什么是 Vue 挂载？

Vue 挂载是指将 Vue 组件实例附加到 DOM 元素的过程。通过挂载，Vue 组件可以与 DOM 交互，更新视图并响应用户交互。

为什么要挂载 Vue？

挂载 Vue 是创建交互式 Web 应用程序的关键步骤。它允许 Vue 组件：

• 访问 DOM 元素及其属性
• 更新视图以响应数据更改
• 监听用户交互，例如点击事件

如何挂载 Vue

挂载 Vue 组件有两种主要方法：

1. 手动挂载

使用 new Vue() 创建组件实例，并使用 $mount 方法将其手动附加到 DOM 元素：

const app = new Vue({
  data: { message: 'Hello, world!' },
});

app.$mount('#app');

2. 声明式挂载

在 HTML 中使用 v-app 指令自动挂载 Vue 应用：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    data: { message: 'Hello, world!' },
  });
</script>

挂载完成后会发生什么？

一旦组件挂载，Vue 将执行以下操作：

• 根据组件的模板渲染虚拟 DOM
• 比较虚拟 DOM 与真实 DOM，并应用必要的更新
• 初始化组件的生命周期钩子
• 监听组件事件并响应用户交互