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


 

一、动态组件

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

 

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

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

 

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

 

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

 

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

二、keeplive

 

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

 

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

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

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

 

 

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

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

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

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

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

 

 2.异步组件

 

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

 

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

 

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

 

 

 

四、¥ref、¥parent、¥root

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

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

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

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

 

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

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

 

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

 

 

 

 

 

 

 

 

 

五、生命周期

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

 

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

 

上一篇:mysql 查询优化执行过程


下一篇:2021-09-23 Vue3知识点