其他分享
首页 > 其他分享> > 【Vue】keep-alive组件和:is

【Vue】keep-alive组件和:is

作者:互联网

keep-alive是一个内置抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

一、keep-alive 属性




二、与keep-alive 相关的两个生命周期钩子

在没有使用keep-alive的组件中,在路由切换或者回退的时候仍然会重新渲染页面,从而触发created,mounted等钩子函数,用户体验不好。

当组件在 keep-alive内被切换时,它的 created(mounted) 和 destroyed 生命周期钩子不会被调用,因为created(mounted)和destroyed 是只执行一次的生命周期钩子。组件并没有被销毁所以不会重复调用,取而代之的是 activated 和 deactivated。(这会运用在 keep-alive 的直接子节点及其所有子孙节点。)

  1. 在keeplive中,activated钩子用来替代created钩子
  2. 在keeplive中,deactivated钩子用来替代destroyed钩子



三、使用场景

用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我
们希望:列表页面可以保留用户的筛选(或选中)状态。

keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以
避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态。


知识点 :is用法

有些 HTML 元素,诸如 <ul>、<ol>、<table><select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

使用:is可以进行转译,可以破除上述的限制。:is主要用于解决标签的嵌套规则,防止编译失败。

is:is的区别(:is可以理解v-bind,js公式)

  1. 可以使用is 直接传递一个组件
  2. 也可以使用:is 查找父组件中的一个赋值,然后找到相应的组件(for循环)

属性include的三种写法(exclude同理),字符串、正则、数组

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- regex (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

vue2中的写法

<!-- 在动态组件中使用 -->
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

<!-- 在vue-router中使用,keepalive直接套住组件 -->
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>

vue3中的写法

	<!-- keep-alive的vue3新写法 -->
    <router-view v-slot="{Component}">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

标签:Vue,钩子,alive,keep,缓存,组件,页面
来源: https://www.cnblogs.com/wanglei1900/p/16320768.html