1.异步组件

目的：优化组件性能
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件
defineAsyncComponent方法来实现此功能
打开项目会更快

<template><keep-alive><component :is="tabComponent"></component></keep-alive><button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
//同步加载
//import ComponentB from './components/ComponentB.vue';
//异步加载组件
import { defineAsyncComponent } from 'vue';
const ComponentB = defineAsyncComponent(() => import('./components/ComponentB.vue')
)export default{data(){return{tabComponent: "ComponentA"}}, components:{ComponentA,ComponentB},methods:{changeHandle(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"}}
}</script>

2.依赖注入

通常情况下，从父组件向子组件传递数据时，会使用props。
现有一结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层子组件需要
一个较远的先组件中的部分数据。在这种情况下，如果仅使用props则必须将其沿着组件链
逐级传递非常麻烦

这一问题被称为 prop逐级透传 
解决：provide 和 inject 可以解决这一问题一个父组件相当于其所有后代的组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖 

也可以从data中读取数据

<template><h3>Grandpa</h3><Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default{data(){return{message:"祖级数据data"}},// provide:{//   message:"祖级数据"// },provide(){return{message: this.message}},components:{Parent}
}
</script>
——————————————————————————————————————————————————————————————————————
<template><h3>Child</h3><p>{{ message }}</p><p>{{ fullMessage }}</p>
</template>
<script>
export default{inject:["message"],data(){return{fullMessage: this.message}}
}
</script>

注意事项

provide 和 inject只能由上到下传递

除了在一个组件中提供依赖，还可以在整个应用层面里提供依赖

<template><h3>Child</h3><p>{{ message }}</p><p>{{ fullMessage }}</p><p>{{ golabData }}</p>
</template>
<script>
export default{inject:["message","golabData"],data(){return{fullMessage: this.message}}
}
</script>
——————————————————————————————————————————————————————————————————————
<template><h3>Grandpa</h3><Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default{data(){return{message:"祖级数据data"}},// provide:{//   message:"祖级数据"// },provide(){return{message: this.message}},components:{Parent}
}
</script>
——————————————————————————————————————————————————————————————————————
<template><h3>Parent</h3><p>{{ golabData }}</p><Child />
</template>
<script>
import Child from './Child.vue';
export default{inject:["golabData"],components:{Child}
}</script>
——————————————————————————————————————————————————————————————————————
<template><h3>Child</h3><p>{{ message }}</p><p>{{ fullMessage }}</p><p>{{ golabData }}</p>
</template>
<script>
export default{inject:["message","golabData"],data(){return{fullMessage: this.message}}
}
</script>

3.Vue应用

3.1.应用实例

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

import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})
//app：vue的实例对象
//在一个Vue项目中，有且只有一个Vue的实例对象

3.2.根组件

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

import { createApp } from 'vue'
import App from './App.vue'//App：就是根组件
const app = createApp(App)

3.3.挂载应用

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

app.mount('#app')
//挂载的内容都将在index.html中呈现
<div id="app"></div>

浏览器可执行文件：1.HTML2.CSS3.JavaScript4.Image
构建工具：Webpake（做一些打包，发布的操作）vite最终被编译成main.js文件，在html中引入
<script type="module" src="/src/main.js"></script>入口main.js

3.4.公共资源文件夹

在src目录下的assets文件夹的作用就是存放公共资源
例如：图片，公共CSS或者字体图标等