发现一个好用的Vue.js内置组件

目录

一、这个好用的内置组件是什么？

二、这个组件的主要功能

三、怎么使用？

四、使用注意事项

五、我的使用场景

一、这个好用的内置组件是什么？

今天在优化我的平台应用时，发现一个好用的组件标签--<keep-alive>。

<keep-alive> 是 Vue.js 中的一个内置组件，它的主要作用是缓存动态组件实例，避免它们在切换时被销毁和重新创建。这对于需要保留组件状态（例如表单输入、滚动位置等）的应用场景特别有用。通过使用 <keep-alive>，可以显著提升用户体验，因为不需要每次显示组件时都重新加载或初始化它。

二、这个组件的主要功能

1. 缓存组件：当包裹在 <keep-alive> 内的组件从激活状态变为非激活状态时，该组件实例不会被销毁，而是会被缓存起来。当下次再次进入这个组件时，会直接从缓存中恢复，保持之前的状态。

2. 生命周期钩子：当使用 <keep-alive> 包裹组件时，这些组件将拥有额外的生命周期钩子：

   • activated: 当组件被激活时调用。这个
   • deactivated: 当组件停用时调用。

三、怎么使用？

使用上很简单，只需要将组件放到这个<keep-alive></keep-alive>标签之内就可以了。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <!-- 使用 keep-alive 缓存组件 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

这里的<component is=""></component>用法也是新发现的，is的属性值填入组件名称即可在这里添加这个组件。这里是通过一个变量来控制组件名称，所以同一时间只会添加一个组件，相当于使用多个<组件1 v-if="current==''"></组件1>。

因为使用了<keep-alive>，所以在多个组件轮流切换显示时，每个组件都不会被销毁，而是被缓存。

还可以使用它的标签内属性进行一些个性控制。如：

• include：字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max：数字。最多可以缓存多少个组件实例。

 <keep-alive include="ComponentA,ComponentB">
   <component :is="currentComponent"></component>
 </keep-alive>

四、使用注意事项

使用<keep-alive>时，需要注意，因为是缓存了组件实例，所以过度使用可能会导致客户端内存占用增加。

<keep-alive>无法与<组件1 v-show="current==''"></组件1>的v-show结合使用，因为它们两者的工作机制不同。

activated这个生命周期钩子和使用了v-if进行显示控制的组件里的mounted可点像，不会像使用v-show进行显示控制的组件在主页面加载时把所有组件里的mounted一次性全部都加载完，而是会在当前这个组件显示（加载）时才执行。

也有点不像，不像的地方在于使用了v-if进行显示控制的组件里的mounted只会在组件第一次显示（也就是初次创建实例）时执行一次，而activated这个生命周期钩子会在每次组件显示（也就是激活）时，执行一次。

五、我的使用场景

我的场景是在主页面下有三个标签页，我使用了三个组件作为三个标签页，使用v-if控制显示/隐藏，然后标签页里各有一个scrollview需要计算尺寸。

本来使用v-if是没问题的，每次切换标签页，都是销毁/新建，计算放在mounted生命周期钩子里都能正常计算出尺寸。但是标签页的数据也要每次清空重来，就换成了使用v-show来控制标签页的显示/隐藏。

这时候，标签页的数据是不会清空重来了，但是后面两个标签页的mounted在主页面加载时，就和第一个标签页的mouted一起执行了，导致第一个标签页的scrollview尺寸计算没问题，但是后面两个的scrollview计算结果都是0。

因为使用v-show，本身标签页都是一次性加载到DOM中的，显示设置了不显示（display:none），所以会同时调用mounted，同时计算，而且计算结果只有显示的这个scrollview是正确的尺寸，不显示的scrollview尺寸就不正确了。

后来使用了<keep-alive>，在类似v-if的控制情况（不会同时执行mounted）下，也不会销毁组件实例，清空数据了。