Vue.js的keep-alive用法

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景：

　　首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。

　　很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。

　　这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。

　　1.列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验

　　2.浪费移动设备的流量。（如果流量无限，这条可以无视）

　　总之，即使只有第1条原因，我们也应该不让它每次退回到列表页的时候都重新发出ajax请求。

　　如何解决这个问题？

　　可以使用Vue.js自带的keep-alive

　　二、keep-alive用法

　　是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

　　它使用的时候非常简单，示例代码如下：　　

 <keep-alive>
    <router-view></router-view>
    <!--这里是会被缓存的组件-->
</keep-alive>

　　这里需要说明的是，本示例是使用了vue-router的，所以这里的keep-alive中放了1个router-view。

　　这是最简单的用法。这样会使所有在vue-router中渲染的组件，全部都将状态保留在内存。

　　如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性。

　　例如，我们有组件newsList和newsInfo，imageList和imageInfo，但是我们只想缓存newsList和imageList这2个列表组件的数据。那么可以这么使用　　

 <keep-alive include="newsList,imageList">
    <router-view></router-view>
</keep-alive>

　　然后还有一步，你必须在需要被缓存状态的组件的script部分，给组件添加一个name属性。例如：

　　以newsList.vue组件为例　　

<template>
    <!-- 这里是newslist组件的html结构部分 -->
</template>
<script>
export default {
    name: "newsList",  //如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。
    data(){
        return {}
    }
</script>

　　需要说明的是，如果没有使用keep-alive缓存状态的组件，可以不写这个属性。但是如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。并且，这个属性的值，还必须跟<keep-alive>标签中include属性的值完全一致，包括大小写。

以上是 Vue.js的keep-alive用法 的全部内容， 来源链接： utcz.com/z/374900.html

回到顶部