【vue】02.vue3实例创建

一.vue 3实例是什么

在 Vue.js 框架中，一个 Vue 实例是使用 Vue 函数创建的一个对象，它是构成 Vue 应用的基础。Vue 3 实例是通过调用vue.createApp方法创建的，这个方法返回一个应用实例。这个实例是根组件的起点，所有的 Vue 组件和应用逻辑都从这里开始。

例子：

import { createApp } from 'vue';
// 从一个单文件组件中导入根组件
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
});

app.mount('#app'); // 参数是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

• 传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为它的子组件。
• 实例必须在调用了 .mount（）方法后才会被渲染。该方法的返回值是根组件实例。

二.为什么要创建vue 3实例

创建 Vue 3 实例是构建 Vue 应用的第一步，本文给出创建 Vue 实例的一些原因：

1. 组织和管理数据：Vue 实例允许你定义和管理应用的状态（数据），这些状态可以通过 Vue 的响应式系统与界面进行同步。

2. 定义模板和视图：通过模板字符串或者 render 函数，Vue 实例让你可以定义组件的结构和视图，Vue 会根据这些定义渲染 DOM。

3. 处理用户交互：Vue 实例允许你定义方法来处理用户事件（如点击、输入等），这些方法可以修改实例的数据，进而触发视图更新。

4. 组件化：Vue 实例可以作为根组件，其他组件可以作为子组件被根组件或其他组件使用，从而构建出可复用的组件结构。

5. 生命周期钩子：Vue 实例提供了一系列生命周期钩子，允许你在组件的不同阶段执行特定的逻辑，比如 mounted、updated、unmounted 等。

6. 插件和混入：Vue 实例可以作为插件或混入（mixins）的入口点，这些功能可以扩展 Vue 的核心功能，或者在多个组件之间共享代码。

7. 全局配置：通过 Vue 实例，可以进行全局配置，比如设置全局组件、指令、过滤器等。

Vue 3 实例是 Vue 应用的核心，它提供了一种高效、声明式的方式来构建和管理复杂的用户界面。通过创建和使用 Vue 实例，开发者能够利用 Vue 的响应式、组件化和声明式特性来快速开发前端应用。