【Vue3】第四篇

01. 插槽Slots

模板内容：html结构，可能是div标签等

也就是说插槽是用来显示html结构的。

实操：

在App.vue中：

在ShotsBase组件中：

结果：

所以，<slot></slot>在哪，html结构就在哪显示：

02. 插槽Slots（续集）

（1）渲染作用域：

如果这个标签内容不是写死的，那么应该由父组件来动态传递数据还是由子组件呢？

答案是：父组件

因为插槽是在子组件中渲染

（2）默认内容

（3）具名插槽

组件之间传递这个插槽，内容不是固定的，可以是一个/两个/三个，且是可以分开的。

下图中传递了两个插槽，每个插槽分别有两个h3标签，我们希望能各渲染一个：


但是结果却重复渲染了：

接下来我们使用具名插槽：


结果如我们所愿：

注意（简写）：
（v-slot在父组件中）

03. 插槽Slots（再续集）

所以我们的需求是：把子组件数据传递给插槽

怎么实现呢？

简记为：子传父，父合并，父传子，子渲染。

父组件用一个名为“slotProps”接收（也可自己起名），slotProps是一个对象，对象里面包含子元素传递过来的那一条数据。
如下形式便可拿到数据并显示在页面中。

如果是具名插槽呢？如下：

04. 组件生命周期

从组件被创建那一刻开始，到组件被卸载那一刻，这是组件的整个生命周期。

在vue的生命周期中，有很多关键节点。比如我们所说的组件被创建的时候、组件初次被渲染了、组件的数据被更新了、组件销毁了。

生命周期钩子函数是自动执行的，不需要被调用。

（记：粉红色部分）

实操：（下面部分以此类推，就没有截出来了）

运行：

控制台自动跳出前四条数据，
点击“更新数据”按钮，页面数据由“更新之前”改为“更新之后”，
控制台跳出如下两条数据（最后两条）。

05. 生命周期应用

（1）应用一：

（2）应用二：



结果：

不过，created不太好，改为mounted更好。
因为created的时候，ui还没渲染，mounted的时候才渲染。
（上图中数据能出来，是因为数据量小）

对于网页而言，先把组件结构渲染出来重要，而不是先拿到数据。

所以，我们应该用mounted，把整个结构已经渲染完成，渲染完成之后再去获取数据，再把页面渲染到浏览器界面之上。

06. 动态组件

有些场景会需要两个组件间来回切换。

结果：

07. 组件保持存活

切换回A（卸载B）没加载那两句话，是因为B组件中没有写入控制台打印输出那两句话。

加上keep-alive之后，切换到B时A不会被卸载，自然切换回A时数据和保持被操作后的一样。

08. 异步组件

同步与异步的概念：
同步：多个功能，ABC三个功能，排队按顺序执行。
异步：多个功能，ABC三个功能同时进行。

异步组件的目的：优化组件的性能。或者说优化项目的性能。

同步组件：假如我们的项目中，有100个组件，如果全都以正常组件加载的方式加载，项目一旦运行，100个组件会同时被加载出来，然后项目才能正常运行。
异步组件：用到哪个组件加载哪个。
（优势：加开项目时，加载会更快，符合业界的需求）

实现方式：

没有使用异步组件时，打开网络请求：

然后把这些清理掉，再做组件切换的时候，会发现，没有新的网络请求再形成了。
说明第一次打开这个项目的时候，所有的内容都已经被加载，包含A、B组件。

使用异步组件之后：

重新请求了一次B组件。说明第一次只加载了A组件。

09. 依赖注入

解决方案：

也可以传递动态数据：

子组件亦如此：
（接收到的数据也可以放入data内处理然后再返回）

注意：组件之间一定要有关系才能传递。

还有一个需要注意的细节：

实操：

10. Vue应用

这节课其实是要告诉大家，Vue项目是从哪开始执行的。

先前讲的都是Vue的API，并没有说Vue是哪开始入口，然后一步一步执行下来的。一直都是利用Vue的脚手架 或者是 Vue的工具来创建好项目，然后直接在项目当中修改。

我们首先要说的是应用实例

ps:这段代码存在于main.js中。

什么是应用实例呢？
你可以把应用实例理解为Vue的实例对象，因为是Vue的项目，所有每一个Vue项目肯定都要有一个Vue的实例，从Vue的实例开始一步步往下执行。

代码解读:
从Vue中引入createApp，然后用它来创建一个App对象
(Vue的实例对象)

对比两图,可以看出App是根组件，那么，什么是根组件呢？

因为Vue是组件化开发，Vue的项目都是从第一个组件开始的，而我们这个App。vue就是第一个组件,也被称为根组件。

当然，单纯把Vue项目创建出来，并把根组件传入这个项目还不算是完成。还要做一件事,那就是挂载应用。

必须要执行app.mount并挂载一个根的容器。

因为Vue并不能直接在浏览器中运行，必须挂载在容器当中。

为什么是#app？它是用来找index.html的。

日后，vue中所有的页面的内容都将放在这个div容器当中呈现。

所以,运行项目时:

其实真正的运行入口是index.html文件，所有的内容都挂在里面。

此外，注意：

构建工具 : (Webpack和Vite) 用来打包以及发布。

其实，我们所有所写的Vue代码，最终都会被编译成一个main.js文件。

然后我们在html中把它引入进来，整个程序就正常运行了。