27.VUE组件的状态保持keep-alive

最新推荐文章于 2024-03-03 17:27:09 发布

休息休息夏

最新推荐文章于 2024-03-03 17:27:09 发布

阅读量905

点赞数 4

分类专栏： VUE基础学习文章标签： vue html

本文链接：https://blog.csdn.net/qq_42881159/article/details/117307578

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

VUE组件的状态保持keep-alive

1. 使用场景：
2.使用keep-alive

1. 使用场景：

当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。
比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这样会降低用户体验度。
组件状态保持就可以解决每次打开页面都需要重新发送请求并且重新渲染的情况
在这里插入图片描述
例如：此时我输入手机号的时候，没有提交，我继续点击“用户名登录”，输入用户名后，此时再点击“手机登录”，此时手机号的内容以及删除，没有保存。

<body>
<div id="app">
    <div>
        <!--直接切换两个标签-->
        <button type="button" @click="isPhone=!isPhone">{{isPhone?'用户名登录':'手机登录'}}</button>
        <input type="text" v-if="isPhone" key="phone" placeholder="请输入手机号码">
        <input type="text" v-else key="username" placeholder="请输入用户名">
    </div>
    <div>
        <!--直接使用component组件切换，会把切换掉的组件彻底销毁，所以被切换掉的组件中的在值一起消失-->
        <button type="button" @click="view='phone'">手机登录</button>
        <button type="button" @click="view='username'">用户名登录</button>
        <component :is="view"></component>
    </div>
    <hr>
    <div>
        <button type="button" @click="com='phone'">手机登录</button>
        <button type="button" @click="com='username'">用户名登录</button>
        <div>
            <!--keep-alive组件包裹的动态组件，在进行组件切换的时候，被切换的组件不会被销毁，他的值被存入内存，被切换的值是可以被保存下来的-->
            <keep-alive>
                <component :is="com"></component>
            </keep-alive>
        </div>
    </div>

</div>
<template id="tempA">
    <input type="text" name="username" placeholder="请输入用户名">
</template>
<template id="tempB">
    <input type="text" name="phone" placeholder="请输入手机号">
</template>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isPhone:true,
            view:'phone',
            com:'phone',
        },
        methods: {},
        components:{
            phone:{
                template:"#tempB"
            },
            username:{
                template: "#tempA"
            }
        }
    });
</script>

2.使用keep-alive

<div>
            <!--keep-alive组件包裹的动态组件，在进行组件切换的时候，
            被切换的组件不会被销毁，他的值被存入内存，
            被切换的值是可以被保存下来的-->
            <keep-alive>
                <component :is="com"></component>
            </keep-alive>
        </div>

在这里插入图片描述
Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>`

 - `<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>`

注：设置最大只能缓存10个组件，如果超过了10个组件，则在缓存中移除使用最少的那个

部分根据其他博主的博文写的
版权声明：本文为CSDN博主「24℃~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_49373551/article/details/109829863

休息休息夏

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
10
评论
27.VUE组件的状态保持keep-alive

VUE组件的状态保持keep-alive1. 使用场景：2.使用keep-alive1. 使用场景：    当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。    比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这
复制链接

扫一扫