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可能会导致组件间的耦合性太强，代码太乱不好管理等；

 

 

 

 

 

 

 

 

 

 

 

五、生命周期

 

 

 

 

 

 

 

六、mixin

代码共享的一种方式，vue一开始用extend后来发现很不灵活，所以vue出现了mixin；

但是vue3出现了compositionAPI后，mixin使用的也越来越少了；