vue动态组件与插件到底是什么?

发布于:2024-07-05 ⋅ 阅读:(16) ⋅ 点赞:(0)

background: yellow;

}

子组件1===============================================

<ul>

  <li v-for="item of items" :key="item">

    <input type="checkbox" />

    {{ item }}

  </li>

</ul>

子组件2===============================================

PostMail

子组件3===============================================

RecycleBin



![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507182953332.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们会发现,当组件切换的时候,都会触发组件的销毁和重建。首先,性能不好。其次,会丢失组件状态



我们可以通过keep-alive 组件 来解决上述问题



<component :is="currentComponent"></component>



![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507183202755.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

现在就处理了上述问题,同时 keep-alive 会触发 `activated`、`deactivated` 两个生命周期函数



1.  `keep-alive` 组件激活时调用

    

2.  `keep-alive` 组件停用时调用

    



[]( )插件

============================================================



插件通常是用来给 `vue` 提供扩展功能的一种方式



插件通常只有两个来源:



1.  自定义

2.  第三方



插件需要一个引入和使用就可以了`注意!插件的引入和使用都需要写在main.js内,且引入需要写在使用之前,使用需要写在new vue之前`



1.  引入



import ppt from ‘./AK’




2.  使用



Vue.use(ppt);




**书写插件时需要注意:**



1.  如果插件是一个对象,必须提供 `install` 方法。



export default{

// 把内容放到指定的方法中

install(){

    console.log("我是自定义的对象插件")

}

}




2.  如果插件是一个函数,它会被作为 `install` 方法。`install` 方法调用时,会将 Vue 作为参数传入



export default function(){

vue.filter("指令名",执行的功能);

}




#### 算法刷题

大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。



![](https://img-blog.csdnimg.cn/img_convert/c582a01373152bb4cd38bc6ad5cc8027.png)



**写在最后**

**最后,对所以做Java的朋友提几点建议,也是我的个人心得:**

1.  疯狂编程

2.  学习效果可视化

3.  写博客
4.  阅读优秀代码
5.  心态调整