Vue3+TS Day13 - 组件v-model、生命周期、动态组件、keep-alive、$refs、webpack分包、异步组件

一、动态组件、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、parent 和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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容