生命周期（重要）

在这里插入图片描述
理解这个文字版的生命周期就可以了，主要是知道整个生命周期过程是什么样的

coderwhy老师手写了生命周期的所有函数，并且进行了演示，还是很清晰的，可以去看代码。
最好是自己也写一遍生命周期的所有函数，这样也会比较清晰

ref：获取实际DOM（掌握）

如果我们在某些开发场景下需要获取原生DOM时，不可以用queryselector这样的方法，vue提供了ref属性来帮助我们获取原生dom，只需要在对应的元素上写上ref=“名字”，就可以通过$refs.名字来获取对应的原生dom了！
在这里插入图片描述

如果是写在组件上的，那么**$refs.名字获取的是这个组件对象**
这里有一个概念：
一个组件其实是一个类 ref在组件中获得的是这个组件（类）生成的实例化对象。vue在实习中用对象来实现类似于类的功能，而react则不一样，react是用class的。

实际上，组件就是类，在父组件中调用子组件时就是用子组件模板来创建一个实例化对象，传入不同的参数得到不同实例化对象，这一点和类创建不同的对象不是一样的吗
都是通用的设计模式

ref拿到组件实例，是可以直接调用组件里的方法的
在这里插入图片描述
多个根拿到的是第一个node结点
所以开发里面最好一个组件里面只有一个根，其他的东西都放根里，这样维护的时候最方便

在这里插入图片描述

动态组件（component）

虽然老师写的是了解，但是我觉得还挺有用。

动态显示组件除了使用v-if以及v-else-if这种逻辑判断还可以使用动态组件
在这里插入图片描述

在这里插入图片描述

：is ——动态绑定 is=‘组件名’ 大小写不敏感

动态组件也可以实现传入参数和监听事件的所有功能

keep-alive（理解）

一般来说我们切换组件，组件就会被销毁，在这里使用生命周期函数也可以清晰的看到home在被切换之后确实销毁了。
在这里插入图片描述
如果切换比较频繁，开销就比较大，以及之前保存的数据都消失，再次切换回来时都会不见了。所以这个时候就很需要keep-alive

本质上是做一个缓存

include的name是写在子组件里面自定义的名字，不是组件名，不过可以写的时候写成组件名更方便
在这里插入图片描述

在这里插入图片描述

webpack分包处理（了解）

在这里插入图片描述

import函数可以让webpack 进行分包处理，因为返回的是promise

异步组件

对某一个组件进行单独的打包，要求放到组件里的是一个组件对象，所以使用vue提供的defineAsyncCompoonent，它返回的是一个异步组件
在这里插入图片描述
使用这个函数导入组件，在打包时会单独把这个组件打包成一个js文件

在这里插入图片描述

组件上使用v-model（高级用法）

有些东西很可能在开发中一直都用不到，这些都属于高级用法，最重要的还是基础的要掌握，这些不会也没有关系，后面慢慢了解，真正使用到了再学习也可以。
没有什么复杂的，本质上还是双向绑定，但是因为是组件之间的数据绑定，所以需要用到组件间通信，在被v-model绑定的子组件上需要写好组件间通信的一些东西，例如props和emits
在这里插入图片描述

v-model默认绑定的参数名和事件名是modelValue
这里@input表示的是绑定的是input事件，当input表有input输入时出发事件，就像@click是绑定click事件。
v-model干了两件事情，一个是传参，一个是监听事件，和之前在input上差不多，但现在是组件间通信了，所以还有些东西例如emits等要在使用v-model的组件里写好！