Vue3实例是什么？怎么用？一文详解！

在前端开发领域，Vue3 已经成为了许多开发者的首选框架，而 Vue3 实例更是其中的关键概念，它就像是一个掌控全局的“大脑”，协调着组件、数据、方法等各个部分的运作，Vue3 实例究竟是什么？又该如何使用它呢？下面我们就来详细探讨。

Vue3 实例的定义

Vue3 实例是通过 Vue 构造函数创建的一个对象，在 Vue3 中，我们通常会使用 `createApp` 函数来创建一个应用实例，然后通过这个实例来挂载根组件、配置全局属性、注册插件等操作。

```javascript import { createApp } from 'vue' import App from './App.vue'

const app = createApp(App) app.mount('#app')

<p>这里的 `app` Vue3 实例，它承载着整个 Vue 应用的核心功能。</p>
## 二、Vue3 实例的主要属性和方法
### （一）属性
#### 1. `$data`
<p>它包含了实例的数据对象，在组件中，我们定义的 `data` 选项最终会成为 `$data` 的一部分，通过 `$data` 我们可以访问和修改组件的数据。</p>
```javascript
const app = createApp({
  data() {
    return {
      message: 'Hello Vue3'
    }
  }
})
const vm = app.mount('#app')
console.log(vm.$data.message) // 输出：Hello Vue3
vm.$data.message = 'New Message'

$props

当组件作为子组件被使用时，父组件传递过来的 props 会被挂载到 `$props` 上，子组件可以通过 `$props` 来获取父组件传递的数据。

$el

它指向实例所挂载的 DOM 元素，在实例挂载完成后（`mounted` 钩子函数中），我们可以通过 `$el` 来操作 DOM。

（二）方法

$watch

用于观察数据的变化，当被观察的数据发生变化时,回调函数会被执行。

```javascript const app = createApp({ data() { return { count: 0 } } }) const vm = app.mount('#app') vm.$watch('count', (newVal, oldVal) => { console.log(`count 从 ${oldVal} 变为 ${newVal}`) }) vm.count = 1 ``` #### 2. `$emit`

在子组件中，用于触发父组件中定义的自定义事件，比如子组件有一个按钮,点击时要通知父组件：

```html ``` ```html ``` #### 3. `$nextTick`

在 DOM 更新循环结束之后执行延迟回调，当我们修改了数据，想要立即操作更新后的 DOM 时，就可以使用 `$nextTick`。

```javascript const app = createApp({ data() { return { show: false } }, methods: { toggleShow() { this.show = true this.$nextTick(() => { // 这里可以操作更新后的 DOM console.log('DOM 已更新') }) } } }) const vm = app.mount('#app') vm.toggleShow() ```

Vue3 实例的生命周期

Vue3 实例从创建到销毁会经历一系列的阶段,每个阶段都有对应的生命周期钩子函数。

### （一）创建阶段 #### 1. `beforeCreate`

在实例初始化之后，数据观测（`data` 属性）和事件配置之前被调用，此时实例上的 `data`、`methods` 等都还未初始化。

#### 2. `created`

实例已经完成了数据观测、属性和方法的运算，`watch/event` 事件回调，但此时 `$el` 还没有被挂载,我们可以在这个钩子函数中进行一些数据的获取等操作。

（二）挂载阶段

beforeMount

在挂载开始之前被调用，相关的 `render` 函数首次被调用，`$el` 还没有被真正替换到 DOM 中。

#### 2. `mounted`

实例挂载到 DOM 上之后被调用，此时我们可以通过 `$el` 操作 DOM,并且可以访问到组件中的数据和方法。

（三）更新阶段

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前，这里适合在更新之前访问现有的 DOM。

#### 2. `updated`

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，此时组件 DOM 已经更新，可以执行依赖于 DOM 的操作。

（四）卸载阶段

beforeUnmount

实例销毁之前调用，在这一步，实例仍然完全可用，我们可以在这里进行一些清理操作,比如清除定时器等。

#### 2. `unmounted`

实例销毁后调用，该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除,所有的子实例也都被销毁。

Vue3 实例的应用场景

（一）全局配置

我们可以通过 Vue3 实例来进行全局的配置，比如设置全局的指令、混入（`mixin`）等。

```javascript import { createApp } from 'vue' import App from './App.vue'

const app = createApp(App)

// 定义全局指令 app.directive('focus', { mounted(el) { el.focus() } })

// 定义全局混入 app.mixin({ data() { return { globalData: 'This is global data' } } })

app.mount('#app')

### （二）插件使用
<p>许多 Vue 插件需要通过 Vue3 实例来注册使用，Vue Router、Vuex 等，以 Vue Router 为例：</p>
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')

（三）状态管理（简单场景）

虽然 Vuex 是专门的状态管理库，但在一些简单的应用中，我们也可以利用 Vue3 实例的 `data` 来进行简单的状态管理,比如多个组件需要共享一个数据：

```javascript import { createApp } from 'vue' import App from './App.vue' import ComponentA from './components/ComponentA.vue' import ComponentB from './components/ComponentB.vue'

const app = createApp({ data() { return { sharedData: 'Initial data' } } }) app.component('ComponentA', ComponentA) app.component('ComponentB', ComponentB) app.mount('#app')

```html
<!-- ComponentA.vue -->
<template>
  <div>
    <p>ComponentA: {{ sharedData }}</p>
    <button @click="updateSharedData">更新数据</button>
  </div>
</template>
<script>
export default {
  computed: {
    sharedData() {
      return this.$parent.sharedData
    }
  },
  methods: {
    updateSharedData() {
      this.$parent.sharedData = 'Updated data'
    }
  }
}
</script>

<!-- ComponentB.vue -->
<template>
  <div>
    <p>ComponentB: {{ sharedData }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    sharedData() {
      return this.$parent.sharedData
    }
  }
}
</script>

通过以上对 Vue3 实例的详细介绍，相信大家对它有了更深入的理解，在实际开发中，合理运用 Vue3 实例的各种属性、方法和生命周期，能够帮助我们构建出高效、灵活的 Vue 应用，无论是小型项目还是大型项目，Vue3 实例都发挥着不可或缺的作用,值得我们深入研究和掌握。