前言
今天我要给大家分享的是如何使用keep-alive做组件缓存?
为什么要做组件缓存?什么场景下会用到组件缓存?或许很多小伙伴根本不知道keep-alive这个组件,也或许知道keep-alive可以做组件缓存,但是却从来没有实践过,懵懵懂懂,刚好我曾经有过使用keep-alive做组件缓存相关的项目经验,现在我就给大家分享一下keep-alive这个组件到底是怎么回事?在项目中应该怎么用?应该注意些什么?
keep-alive的使用场景?
现在给大家讲一讲keep-alive的使用场景,比如你在购物网站,不断地滚动屏幕,当滚动到了很久很久,你突然发现一件你很喜欢的商品,你点击进入详情,当你查看了该商品的详情,返回出来要保持之前的位置继续往下浏览商品,你会怎么做?再比如你在一个页面有多个tab,默认是会选中第一个tab,当你在第二个tab切换到其他页面的时候(比如对应tab的详情),再次返回到当前的页面,要保持你去之前的tab和对应的状态,你会怎么做?
这里如果没有使用组件缓存的话,当你点击商品详情页面,当前商品列表的页面就会销毁,当你从商品详情返回到商品列表的时候,这个页面已经重新进行了构建,是不会保存在你之前刚刚浏览的位置的,又会返回到最顶上的位置,这个时候你让用户再重复把刚刚的内容再刷一遍吗?而用户的需求是继续之前的位置,可以接着往下滑。切换tab的场景也是这样的道理,不会保存你离开之前的状态,下面我会深入讲解。
vue的八大生命周期
我目前写了一个tab案例,帮助大家理解keep-alive,对应的逻辑和代码如下: 一共有tab1和tab2两个页面,点击按钮会显示对应tab的内容,点击color按钮,会变更内容的颜色,同时会在控制台打印所有生命周期。
<template><div><h1>keep-alive组件缓存</h1><Button type="success" @click="Success()">tab1</Button><Button type="warning" @click="warning()" style="margin-left:30px"&g