vue 动态组件创建缓存激活 keep-alive activated deactivated

最新推荐文章于 2022-04-26 15:09:29 发布

259-aaa

最新推荐文章于 2022-04-26 15:09:29 发布

阅读量479

点赞数

分类专栏：学习文章标签： vue.js 缓存 javascript

本文链接：https://blog.csdn.net/qq_44680550/article/details/122097004

版权

学习专栏收录该内容

66 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue.js中创建动态组件，包括动态组件的缓存机制，如何解决缓存中的问题，以及利用keep-alive实现组件的激活(activated)和非激活(deactivated)状态管理。通过示例代码展示了动态加载、缓存效果以及激活状态触发的相关操作。

摘要由CSDN通过智能技术生成

简介

在同一个挂载点,可以切换显示不同组件

动态组件 - 创建

效果

在这里插入图片描述

代码

在这里插入图片描述

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>
    <p>下面显示注册组件 - 动态切换：</p>
    <div style="border: 1px solid red;">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import UserName from '../components/01/UserName.vue'
import UserInfo from '../components/01/UserInfo.vue'
export default {
  data () {
    return {
      comName: "UserName",
    }
  },
  components: {
    UserName,
    UserInfo
  }
}
</script>

动态组件 - 缓存

避免组件频繁切换 - 造成的创建和销毁，提高性能

语法

Vu e内置的 keep-alive 组件包起来要频繁切换的组件

BUG效果

在这里插入图片描述

正确效果

在这里插入图片描述

代码

在这里插入图片描述

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>
    <p>下面显示注册组件 - 动态切换：</p>
    <div style="border: 1px solid red;">
      <!-- Vue 内置 keep-alive 组件，把包起来的组件缓存起来 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

动态组件 - 激活、非激活

扩展：2个新的生命周期方法（钩子函数）

activated - 激活时触发
deactivated - 失去激活状态触发

效果

在这里插入图片描述

代码

在这里插入图片描述

<script>
export default {
  created () {
    console.log("02-UserName-创建")
  },
  destroyed () {
    console.log("02-UserName-销毁")
  },
  // 组件缓存下 - 多了2个钩子函数
  activated () {
    console.log("02-UserName-激活")
  },
  deactivated () {
    console.log("02-UserName-失去激活")
  }
}
</script>