Vue-创建应用/挂载应用/应用和组件关系/创建组件的三种方法/应用配置-CSDN博客

本文链接：https://blog.csdn.net/2301_78856868/article/details/148151016

.mount( ) 方法应该始终在整个应用配置和资源注册完成后被调用

可以在应用实例 API | Vue.js 里面浏览所有应用实例API

注：本文以MDN为基础

应用实例

每个 Vue 应用都是通过 createApp 函数创建的应用实例

// 创建Vue应用实例
const app = Vue.createApp({
  setup() {
    // 根组件的逻辑
    // ...
  }
});

根组件

我们传入 createApp 的对象其实是一个组件，每个应用都需要一个“根组件”，其他组件会将作为根组件的子组件

如果使用的是单文件组件，我们可以直接从另一个文件导入根组件

import {createApp} from 'vue'

import App from './App.vue'

const app = createApp(App)

大多数真实的应用都是一颗嵌套的、可重用的组件树，例如

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

挂载应用

应用实例必须在调用了 .mount( ) 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串，比如创业平台 index.html

  <div id="app">

在 index.js 里面有（Vue2里面得用 CSS选择器：el:'#app',）

const app = createApp({
  // ...
})
app.mount('#app')

应用根组件的内容见会被渲染在容器元素里面，

容器元素自己将不会被视为应用的一部分

解释如下：Vue 实例挂载的 DOM 元素（容器元素）本身不会被 Vue 控制，只内部内容，比如

<div id="app" class="container">
  <p>这里的内容将被替换</p>
</div>

被挂载后

<div id="app" class="container">
  <!-- Vue 渲染的内容在这里 -->
  <header>...</header>
  <section>...</section>
  <!-- 等等 -->
</div>

原来的 <p>这里的内容将被替换</p> 被完全替换了（除非没写 template 选项，这样会仍然使用 HTML中的模版，不会替换）

那为什么还要在被挂载标签里面写东西呢？

1.提供无JS情况下的内容（渐进式增强）

2.改善首屏体验：渲染Vue应用是需要时间的，在这段时间里面显示的是 HTML

3.还是老生常谈的 SEO 搜索引擎优化

4.为开发者提供挂载点的提示

5.避免闪烁或布局跳转

当执行 app.mount('#app') 进行挂载操作时，Vue 会找到 HTML 中的 <div id='#app'> 元素，然后将这个元素的内容替换为模版内容，但 <div id='#app'> 这个标签仍然是普通的 HTML元素，不受Vue控制

.mount( ) 方法应该始终在整个应用配置和资源注册完成后被调用

请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例，这样方便访问根组件、支持链式调用、区分职责

什么是资源注册？

资源注册是指在 Vue 应用中全局活局部注册可以重复使用的内容，如组件、指令、插件等，这些注册的资源岁后可以应用在不同的部分（就像可以重复使用的模块、类等等）

比如

// 注册Element Plus组件库
app.use(ElementPlus);

// 注册所有Element Plus图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

资源注册的主要类型包括：

1.组件注册 app.component(name,componentDefinition)

2.指令注册 app.directive(name,directiveDefinition)

3.插件注册 app.use(plugin,options)

4.mixin注册 app.mixin(mixinObeject)

什么是应用实例？

应用实例（Application Instance）是通过 Vue.createApp( ) 创建的对象，它是整个 Vue 赢得起点和配置中心，应用实例拥有：

1.全局API：比如上面说的 app.component( ) , app.directive( ) , app.use( )

2.全局配置：比如 app.config.errorHandler, app.config.performance 等

3.资源注册：可以在应用范围内注册组件和插件

4.挂载方式：通过 app.mount( ) 方法挂载到 DOM 元素上

什么是根实例？

根实例(Root Instance)是应用实例挂载到DOM后创建的组件实例，是组件树的顶层节点。它代表了整个Vue应用的根部，所有其他组件都是它的后代。

在Vue 3中，根实例是从您传递给 createApp() 的对象创建的，这个对象包含了组件的选项（如setup函数）

总的来说，~~应用实例（app）只有一个~~，代表整个应用，而根实例（app.mount()返回值）~~可以有多个，~~每个挂载点一个，一般不需要保存，但需要从外部操作组件的时候需要保存根组件

（在多个应用实例中会进行更正）

DOM中的根组件模版

上面说了根实例是组件树的顶层节点，所以根组件是 Vue 应用的最外层组件，在 Vue 应用中，组件形成了树形结构，如

根组件
  ├── 子组件A
  │     ├── 孙组件A1
  │     └── 孙组件A2
  └── 子组件B
        ├── 孙组件B1
        └── 孙组件B2

应用和组件关系

应用 (Application)：是Vue程序的顶层实例，负责全局配置和管理组件树
组件 (Component)：是构成应用界面的可重用模块，负责局部UI和交互逻辑

两者间的关系如容器和内容的关系 - 应用是容器，组件是内容。

在创业平台项目中的体现

1.创建应用实例

// 创建Vue应用实例
const app = Vue.createApp({
  setup() {
    // 根组件的逻辑
    // ...
  }
});

2.应用实例的配置和拓展

// 注册Element Plus组件库
app.use(ElementPlus);

// 注册全局组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

这里面 app.component 注册全局组件，那么这些组件在任何其他组件中都可以使用

3.最后通过 mount( ) 应用挂载

根组件模版特点：

1.组件树的起点

2.替换挂载元素内容

3.接受根组件的数据和方法：根组件模版使用在 setup 函数中返回的所有数据和方法，例如 {{userInfo.name}} 、 @click= （事件监视器）等

组件模版定义方式：

1.内联模版（仅限Vue2）：就像在HTML里面写内联样式<style>一样，可以直接在 JS 中直接定义组件，app.component

2.外部HTML（即在挂载容器内编写），然后通过 JS 脚本挂载（就像创业平台中的 index.html 和 index.js 中写的）

3.单文件组件（.vue文件），这样就实现了组件的模版、样式、逻辑集成在一起，如

<!-- App.vue - 根组件 -->
<template>
  <header class="header">
    <div class="user-info" v-show="isLogin">
      欢迎，{{ userInfo.name }}
    </div>
  </header>
</template>

<script>
export default {
  setup() {
    // 这里是与模板关联的逻辑
    const isLogin = ref(true);
    const userInfo = ref({ name: '测试用户' });
    return { isLogin, userInfo };
  }
}
</script>

<style>
.header {
  /* 样式定义 */
}
</style>

就像我上面说的，如果没有设置 template 选项， Vue 会自动使用容器（HTML文件）内的 innerHTML 作为模版

应用配置

就像我上面在应用实例里面说的 “全局配置：比如 app.config.errorHandler, app.config.performance 等”，应用实例会暴露对象允许我们配置一些应用级的选项

例如一个应用级的错误处理器，用于捕捉所有字组件上的错误

.config

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

.component

注册应用范围内的可用资源，例如注册一个组件（就像我在上面资源注册里面写的）

app.component('TodoDeleteButton', TodoDeleteButton)

这样 TodoDeleteButton 在应用的任何地方都是可用的

可以在应用实例 API | Vue.js 里面浏览所有应用实例API

多个应用实例

我上面说应用实例（app）只能有一个是错的

在 Vue2中只能有一个应用实例，但在 Vue3 中可以有多个

createApp 这个应用实例API 允许在同一个页面创建多个共存的 Vue 应用，且每个应用都拥有自己的 配置作用域、全局组件注册、插件实例，会被挂载到不同 DOM 元素

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去

一个页面可以有多个应用实例，一个应用实例一个根实例，每个根实例控制一个组件树