Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker DevOps


Vue keep-alive 缓存动态组件实例不销毁组件

Vue 大约 1515 字

作用

保持组件实例,不再销毁和重新创建,保留数据。

使用

直接使用<keep-alive>标签包裹动态组件即可。类似:<component/><router-view/>等。

使用vue-devtools可以看到隐藏的组件会显示inactive

生命周期

当组件被缓存时,会自动触发组件的deactivated生命周期函数。

当组件被激活时,会自动触发组件的activated生命周期函数。

注意:当组件第一次被创建时,既会执行created,又会执行activated生命周期函数。

include exclude

include:指定组件进行缓存。没有指定的其他组件都不会被保存。使用,逗号隔开,注意两个组件名之间不能有空格。

exclude:指定组件不进行缓存(每次都会销毁和创建)。

示例

<template>
  <div>

    <keep-alive include="FakeComA,FakeComB" exclude="FakeComC">
      <component :is="componentName"></component>
    </keep-alive>

    <button @click="componentName = 'FakeComA'">切换组件A</button>
    <button @click="componentName = 'FakeComB'">切换组件B</button>
  </div>
</template>

<script>
import FakeComA from "@/components/FakeComA";
import FakeComB from "@/components/FakeComB";

export default {
  name: "KeepAliveComponent",
  components: {FakeComB, FakeComA},
  data: () => {
    return {
      componentName: "FakeComA"
    }
  },
}
</script>

FakeComA示例代码,包含了activateddeactivated生命周期函数。

<template>
<div>
  <p>
    Fake component a
  </p>
</div>
</template>

<script>
export default {
  name: "FakeComA",
  created() {
    console.log("fake component a created")
  },
  destroyed() {
    console.log("fake component a destroyed")
  },
  activated() {
    console.log("fake component a activated")
  },
  deactivated() {
    console.log("fake component a deactivated")
  }
}
</script>
阅读 150 · 发布于 2022-12-28

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批