Vue3—07—动态组件;keeplive;生命周期;mixin

时间:2021-09-20
本文章向大家介绍Vue3—07—动态组件;keeplive;生命周期;mixin,主要包括Vue3—07—动态组件;keeplive;生命周期;mixin使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、动态组件

所谓的动态组件应该和keeplive一样,都是vue的内置组件;

component标签的is属性可以写哪些东西? 

  • 第一,全局组件,比如通过vue.createApp().component()函数注册过的全局组件;
  • 第二,在本组件实例中注册的局部组件,即在本组件实例的component属性注册的组件;

二、keeplive

 建议直接用逗号分隔,也就是第一种方式,后面的正则和数组都太麻烦了,而且还要加冒号:让vue知道去管理它,它不是一个字符串;

三、webpack代码分包和异步组件

打包之后会有两个文件,app.js 是我们自己写得js逻辑,  chunk-vendor是我们依赖的第三方js;

后面我们开始分包后,会有一个chunk.js文件,这个就是我们分包的js逻辑;

webpack对代码的分包主要是通过import().then();的方式指定这份代码要分包,即不是需要立即加载;

 2.异步组件

四、¥ref、¥parent、¥root

我们可以给html标签或者组件标签,添加一个属性¥ref,

然后我们就可以在任意组件逻辑中,通过this.$ref去获取这些元素标签或者组件标签了;

也就是说,这样我们就可以去操作dom元素了;

 所以这是一个很强的属性,但是有时候我们不会用,还是用props或者emit等进行组件的通信,原因就是¥ref和¥parent¥root可能会导致组件间的耦合性太强,代码太乱不好管理等;

五、生命周期

原文地址:https://www.cnblogs.com/EricShen/p/15314087.html