wordpress 面包屑导航爱站seo工具包
目录
应用实例
根组件
挂载应用
容器元素自己将不会被视为应用的一部分
那为什么还要在被挂载标签里面写东西呢？
.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 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去
一个页面可以有多个应用实例，一个应用实例一个根实例，每个根实例控制一个组件树