Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置

目录

应用实例

根组件

挂载应用

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

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

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

什么是资源注册？

什么是应用实例？

什么是根实例？

DOM中的根组件模版

根组件模版特点：

根组件模版定义方式：

应用配置

.config

.component

多个应用实例

---

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

注：本文以MDN为基础

应用实例

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

import {createApp} from 'vue'const app=createApp({/*根组件选项*/
})

根组件

我们传入 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

根组件模版特点：

        1.组件树的起点

        2.替换挂载元素内容

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

根组件模版定义方式：

        1.内联模版（Vue2）

        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 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去

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