Vue3+TS Day13 - 组件v-model、生命周期、动
2021-12-08 本文已影响0人
望穿秋水小作坊
一、动态组件、keep-alive、$refs、webpack分包、异步组件
1、实现下面效果，用v-if如何实现？
image.png
image.png
2、上述代码有没有更加优雅的实现方式呢？
- 使用内置的动态组件
- 动态组件是使用 component组件，通过一个特殊的attribute
is来实现
image.png
image.png
3、上面两种实现方式，如果想做页面缓存要怎么做？
- 在开发中某些情况，我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以
使用一个内置组件：keep-alive
image.png
image.png
4、对keep-alive的组件，如果要监听页面的消失和出现要怎么办？
image.png
5、我们在组件中想要直接获取到元素对象或子组件实例要怎么办？
image.png
6、
root （了解即可）。
image.png
7、在webpack项目中，如何对部分js代码在build的时候，进行分包？
image.png
8、vue中的异步组件（了解即可，用到再说）
image.png
image.png
image.png
二、生命周期
1、一般组件有哪几个生命周期？
- 每个组件都可能会经历从
创建、挂载、更新、卸载等一系列的过程；
image.png
2、生命周期流程图，要一眼能看懂！
image.png
三、组件的v-model（高级）
1、v-model 默认做了那两件事？
- 前面我们在input中可以使用 v-model 来完成
双向绑定 - v-bind:vale的数据绑定 + @input的事件监听；
image.png
2、那么如何在自定义组件上使用 v-model 呢？
image.png
image.png
3、那么如何在自定义组件上使用 多个 v-model 呢？
image.png
