Vue3 keep-alive

  Vue3中的keep-alive可以用于优化组件渲染的性能。例如,在一个页面中,有一些组件不需要每次访问时都重新渲染,可以使用keep-alive将这些组件缓存起来,只在第一次或数据变化时渲染更新。这样做可以减少组件的重复渲染,提高页面的响应速度。同时,keep-alive也可以用于处理一些需要缓存的数据,例如用户登录状态等。
  本文主要介绍Vue3中keep-alive的使用。

Vue3 keep-alive的使用

  • 属性详解
  • 基本用法
    • 1、组件配置使用
    • 2、路由配置使用
  • 注意

属性详解

  • include:缓存的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)
  • exclude:排除的组件(可以是字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)
  • max:缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
  1. 当组件名被include和exclude同时绑定时,exclude优先与include
  2. 缓存组件数大于max时,删除第一个被缓存的组件。
  3. include和exclude传 数组 情况居多

  官网范例:

<template>
	
	<keep-alive include="a,b">
	  	<component :is="view">component>
	keep-alive>

	
	<keep-alive exclude="c"> 
	  	<component :is="view">component>
	keep-alive>
	
	
	<keep-alive :include="/a|b/">
	  	<component :is="view">component>
	keep-alive>

	
	<keep-alive :include="includedComponents">
		<router-view>router-view>
	keep-alive>
	
	
	<keep-alive include="a,b" exclude="b"> 
	  	<component :is="view">component>
	keep-alive>

	
	<keep-alive exclude="c" max="5"> 
	  <component>component>
	keep-alive>
template>

<script>
	import { ref,computed } from 'vue'
	import A from './A.vue'
	import B from './B.vue'
	import C from './C.vue'

	const view = ref('A')
	const includedComponents = computed(() => {
		return view.value
	})
script>

  动态组件要先注册再使用,且与keep-alive一起使用时先匹配view值对应组件名的组件再做缓存判断

基本用法

1、组件配置使用

  示例代码:

<template>
  <div id="nav">
    <button @click='jumpHome'>homebutton>
    <button @click='jumpAbout'>aboutbutton>
  div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    keep-alive>
  router-view>
template>

<script>
	export default {
		name: 'App'
	}
script>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
script>

2、路由配置使用

  示例代码:
  在路由表中的meta属性中添加自定义信息keepAlive,true为缓存,反之不缓存。

const routes = [
	{
	  path: '/home',
	  name: 'Home',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/Home.vue')
	},
	{ 
	  path: '/About',
	  name: 'About',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/About.vue')
	}
]

  App.vue

<template>
	<div id="nav">
		<button @click='jumpHome'>homebutton>
	    <button @click='jumpAbout'>aboutbutton>
	div>
  	<keep-alive>
    	<router-view v-if="route.meta.keepAlive">router-view>
	keep-alive>
	<router-view v-if="!route.meta.keepAlive">router-view>
template>

<script>
	export default {
		name: 'App'
	}
script>

<script setup>
	import { useRouter,useRoute } from 'vue-router'
	
	const route = useRoute()
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
script>

  实际开发中,我们可以结合路由守卫来实现需要缓存组件的缓存。
  补充 App.vue:

<script setup>
	import { beforeRouteLeave } from 'vue-router'
	
	beforeRouteLeave(to, from, next) {
	    to.meta.keepAlive = true;
	    next();
 		}
	}
script>

注意

  • 1、include和keepAlive只能使用一个,不能混合使用。
  • 2、如果要缓存,最好在keep-alive外加个div标签。根标签不该是router-view,不然会白屏。
  • 3、keep-alive不支持缓存孙子组件。若想缓存孙子组件,可以将整个子组件缓存,或者在子组件里再使用keepalive。
  • 4、一定要给组件加上name。使用setup语法糖的可以

你可能感兴趣的:(vue.js,前端,javascript)