【Vue3】keep-alive 缓存组件

最新推荐文章于 2024-04-09 21:25:58 发布
最新推荐文章于 2024-04-09 21:25:58 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： 缓存 vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/132200297
版权

当在 Vue.js 中使用 <keep-alive> 组件时，它将会缓存动态组件，而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。

<keep-alive> 只能包含（或者说只能渲染）一个子组件，如果需要包含多个子组件，需要用 v-if 选择某个确定的组件进行渲染。也可以使用 <template> 或其他组件标签将它们包裹起来，再通过 v-if 选择确定的某个组件进行渲染。因此 keep-alive 标签里面有且只有一个子节点（或者说只能渲染一个子节点）。这些子组件可以通过动态组件或者其他方式进行切换。

当一个被 <keep-alive> 组件包裹的组件被切换出去时，它的状态将会被保留在内存中，而不会被销毁。当组件再次被切换回来时，它会从缓存中直接取出，并且保持之前的状态。

1. keep-alive 和 v-show 的区别

  • 作用：

<keep-alive>：用于缓存组件，以避免每次组件切换时销毁和重新创建实例。它会保留组件的状态，以便在需要时直接从缓存中取出。

v-show：用于根据条件动态显示或隐藏组件。它通过控制 display CSS 属性来决定组件是否在 DOM 中渲染。

  • 使用场景：

<keep-alive>：适用于需要在组件间快速切换并保持组件状态的场景。例如，当你有一个包含表单的编辑页面，在切换到其他页面并返回时，希望保留用户已输入的数据。

v-show：适用于根据某些条件动态显示或隐藏单个组件。例如，根据用户权限动态显示不同的导航菜单。

  • 对组件实例的影响：

<keep-alive>：保留组件的状态和实例，只是保存虚拟 DOM ，以便在需要时直接从缓存中取出。组件的生命周期钩子函数 activated 和 deactivated 也会在缓存和激活时触发。

v-show：每次切换显示或隐藏时，组件实例会保持不变，存在于真实 DOM ，并且会触发相应的生命周期钩子函数 beforeUpdate 和 updated。

2. keep-alive 使用案例

App.vue

<template>
  <el-button type="primary" @click="flag = !flag"> 切换组件</el-button>
  <!-- [] 里面名称是原本的组件名 -->
  <!-- 
    props介绍：
    :exclude="['A']"  不缓存A组件
    :include="['A']"  缓存A组件
    :max="2"  最多缓存2个，如有多个从后往前算起
   -->
  <keep-alive :exclude="['A']">
    <AVue v-if="flag"></AVue>
    <B v-else></B>
  </keep-alive>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import AVue from './components/A.vue'
import B from './components/B.vue'
const flag = ref<boolean>(true)
</script>

<style scoped></style>

A.vue

<template>
  <h1 style="margin: 10px;">我是A组件</h1>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

B.vue

<template>
  <h1 style="margin: 10px;">我是B组件</h1>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>


在这里插入图片描述

3. 因注释导致的意外错误

写入注释：
在这里插入图片描述

报错：
在这里插入图片描述
因此 keep-alive 组件内不要使用注释，会被解析为子节点

解决方法：

  • keep-alive 内部不写注释

  • 使用 <template> 或其他组件标签将它们包裹起来

    • 此时 可以认为 利用了 keep-alive 标签里面有且只有一个子节点（或者说只能渲染一个子节点）
  <keep-alive :exclude="['A']">
      <template v-if="flag">
        <!-- [] 里面名称是原本的组件名 -->
        <AVue></AVue>
      </template>
      <template v-else>
        <B></B>
      </template>
  </keep-alive>

4. keep-alive 生命周期

<keep-alive> 组件提供了以下两个主要的生命周期钩子函数来管理缓存的组件：

  • activated：被缓存的组件激活时调用。

  • deactivated：被缓存的组件停用时调用。

App.vue

<template>
  <el-button type="primary" @click="flag = !flag"> 切换组件</el-button>

  <!-- 
    props介绍：
    :exclude="['A']"  不缓存A组件
    :include="['A']"  缓存A组件
    :max="2"  最多缓存2个，如有多个从后往前算起
   -->
  <keep-alive :exclude="['B']">
      <AVue v-if="flag"></AVue>
      <B v-else></B>
  </keep-alive>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AVue from './components/A.vue'
import B from './components/B.vue'

const flag = ref<boolean>(true)
</script>

<style scoped></style>

A.vue

<template>
  <h1 style="margin: 10px;">我是A组件</h1>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive,onMounted,onUnmounted,onDeactivated,onActivated } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}

onMounted(() => {
  console.log('初始化')
}),
onActivated(() => {
  console.log('keep-alive初始化')
})
onDeactivated(() => {
  console.log('keep-alive销毁')
})
onUnmounted(() => {
  console.log('销毁')
})
</script>

B.vue

<template>
  <h1 style="margin: 10px;">我是B组件</h1>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

在这里插入图片描述
在这里插入图片描述

小秀_heo
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中keep-alive内置组件缓存的实例代码
01-19
需求： home 组件中有一个 name 的 data 数据。这个数据修改之后，再切换到其他的组件。再切换到 home 组件，希望 home 中 name 这个值是之前修改过的值。希望组件有缓存。 keep-alive 的使用方式： 将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢） 3. 会多出两个生命周期的钩子函数 a. activated 缓存激活 第一次会触发、组件能被看到 一般根 created
vuex + keep-alive实现tab标签页面缓存功能
10-16
主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue3缓存两种：路由缓存与Pinia状态缓存
最新发布
m0_64469199的博客
04-09 234
单页应用中，最令人头疼的就是页面刷新或者回退时，数据丢失或重新加载的问题。本文以微小demo介绍两种缓存以应付Vue3项目中的绝大多数需要缓存的业务。
Vue3 使用keep-alive缓存组件
qq_52099965的博客
10-21 359
Vue3 使用keep-alive缓存组件
vue3 keep-alive 缓存组件
m0_67009383的博客
01-25 465
vue3 keep-alive
Vue3动态组件、缓存组件、分发组件
影子
08-19 1506
1、动态组件 Vue提供了全局的内置组件，这些组件主要完成的都是功能封装 动态组件、缓存组件、分发组件 多个组件使用同一个挂载点，然后动态地在他们之间切换，称为动态组件 用法：<component :is=""></component> 使用js属性动态绑定组件，决定那个组件被渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt...
vue 使用 keep-alive
qq_45770253的博客
07-28 1万+
vue3 使用 keep-alive 踩坑踩了半天！！！ 我这里的小 DEMO 是，首先打开主页是新闻的界面 然后我点击跳转到消息界面 之后我想要做的效果，是跳转到其他的页面之后，我再次回到首页，那么他的页面还是保持在消息的界面 这里注意，是要给哪个页面进行缓存就给哪个页面添加 keepAlive:true ！！！第二步！！！，在 App.vue 界面中添加 keep-alive，注意下面这种写法是 vue3 的新写法，之前都是 keep-alive将 router-view 包裹住的 ！！！第三步！！
【Vue3第二十二章】KeepAlive缓存组件
前端知识分享喵
02-27 5220
使用keep-alive的好处就是，在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
vue3项目keepAlive使用方法详解
热门推荐
蓑笠翁
11-07 3万+
一、介绍 keepalive是Vue的内置组件，作用是将组件缓存在内存当中，防止重复渲染DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法vue2.x与vue3.x有部分差别。以下主要将keepaliev在vue3.0中的用法。 二、使用 通常我们可以配置整个页面缓存或只让特定的某个组件保持缓存信息，配置了keepalive的路由或者组件，只会在页面初始化的时候执行created->mounted生命周期，第二次及以后再进入该页面将不会执行改生命周期，而是会去读取缓存信息。 1、
Vue3 keep-alive
qq_45438471的博客
04-24 6792
Vue3中的keep-alive可以用于优化组件渲染的性能。例如，在一个页面中，有一些组件不需要每次访问时都重新渲染，可以使用keep-alive将这些组件缓存起来，只在第一次或数据变化时渲染更新。这样做可以减少组件的重复渲染，提高页面的响应速度。同时，keep-alive也可以用于处理一些需要缓存的数据，例如用户登录状态等。   本文主要介绍Vue3中keep-alive的使用。
vue3 - 15.keepAlive缓存组件
qq_34111842的博客
10-22 2519
keep-alive 属性 - include : 声明想要被缓存的组件，比如我们有两个组件，我们只想缓存A组件，不想缓存B组件，那么我们可以用include声明，include支持字符串，数组，正则，比如：这个时候，当我们切换组件的时候，B组件是没有被缓存的。当使用keep-alive的时候，我在父组件切换其中一个子组件，其中一个子组件的onActivated默认会执行一次，当我们关闭其中一个子组件的时候，当前组件的onDeactivated会执行，说明已经被销毁，但是onMounted始终会执行一次。
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于vue中keep-alive缓存问题的解决方法
01-19
vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。 但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期，完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 不用$destroy方法的时候可以用watch监听路有变化来实现效果 created() { th
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vuex的插件vuex-persistedstate数据持久化存储
05-04 5269
Vuex的插件vuex-persistedstate数据持久化存储
在Vue3中使用缓存组件keep-alive vue3缓存组件
半只
12-05 2242
在Vue3中使用缓存组件keep-alive vue3缓存组件, 在Vue3中使用缓存组件keep-alive vue3缓存组件 在Vue3中使用缓存组件keep-alive vue3缓存组件 在Vue3中使用缓存组件keep-alive vue3缓存组件组件 在vue3中写法和vue2不一样。
vue3.0中的keep-alive
weixin_39639298的博客
06-17 5363
vue3中的keep-alive
vue3学习（九）--- keep-alive缓存组件
邱先生的博客
10-17 900
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。keep-alive接下来看一下keep-aliveonMountedkeep-alive。
vue3 给缓存组件
weixin_43136717的博客
11-02 573
vue 缓存组件
vue3设置keep-alive缓存组件
12-02
在Vue3中，设置keep-alive缓存组件非常简单，只需要将要缓存的组件使用<keep-alive>标签包裹即可。例如： ```html <keep-alive> <router-view /> </keep-alive> ``` 上述代码中，<router-view>是Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值