Vue3基础：如何通俗得理解vue3里面的“应用实例”（Application Instance）

在 Vue 3 中，“应用实例”（Application Instance）是一个非常核心的概念。要通俗地理解这个概念，可以将其想象为一座房子，而你的 Vue 应用就是这座房子。

1. 创建应用实例

想象你要建造一座房子。在 Vue 3 中，这就相当于使用 createApp 函数创建一个新的应用实例。这个过程就像是确定了房子的基础结构和外观设计。

const app = Vue.createApp({
   ...})

这里的 app 就是你的房子（即应用实例）。

2. 注册组件和插件
   接下来，你可能会为你的房子选择内部装修风格、添加家具（组件）或者安装一些实用工具（插件）。在 Vue 中，你可以在应用实例上注册全局组件和插件。

app.component('MyComponent', {
   ...})
app.use(MyPlugin)

这些全局组件和插件就像是你房子里的家具和设施，它们可以在你的 Vue 应用的任何地方被使用。

3. 挂载应用实例
   最后一步就是把你的房子建立在某个地基上。在 Vue 中，这对应着将应用实例挂载到 DOM 元素上。这意味着你的 Vue 应用将控制这个 DOM 元素，并在其中渲染内容。

app.mount('#app')

如果把 DOM 元素比作地基，那么 .mount(‘#app’) 就是将你的 Vue 房子建立在这个地基上。

总结来说，Vue 3 中的应用实例是整个 Vue 应用的基础和入口。就像一座房子，它定义了整个应用的结构和行为，允许你添加组件和插件来扩展功能，最终被建立（挂载）在某个具体的地方。通过这个应用实例，你可以控制整个 Vue 应用的行为和展现。