使用keep-alive组件实现vue页面缓存的技巧

1.介绍

在使用Vue编写单页应用时，我们可能会遇到下面这样的问题：在多个页面之间进行切换时，我们的数据都将被清空，而这些数据可能非常耗时或者复杂，重新加载将会耗费很多时间。这时，如果我们在Vue中使用keep-alive组件，就能把这个问题解决。

keep-alive组件是Vue提供的一个抽象组件，它可以缓存组件的状态或避免重新渲染，以提高应用程序的性能。

2.使用keep-alive组件来实现页面缓存

使用keep-alive组件来实现页面缓存可以保留页面数据和状态。下面我们来看一个例子：

  <template>
    <div>
      <keep-alive>
        <component v-bind:is="currentTabComponent"></component>
      </keep-alive>
      <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="{'active':currentTabComponent===tab}" v-on:click="currentTabComponent=tab">{{tab}}</button>
    </div>
  </template>
  
  <script>
  export default {
    data: {
      currentTabComponent:'tab1',
      tabs:['tab1','tab2','tab3']
    },
    components:{
      tab1:{template:'<div>Tab1</div>'},
      tab2:{template:'<div>Tab2</div>'},
      tab3:{template:'<div>Tab3</div>'},
    }
  }
  </script>

2.1代码解析

上面的代码中，我们定义了一个包含三个标签页（tab1、tab2、tab3）的页面。在component标签中，我们使用了v-bind:is属性，将currentTabComponent作为要渲染的组件的值传递给component标签。keep-alive标签将包含的组件实例保持在内存中，避免重新渲染。在按钮的单击事件中，我们设置当前选定的组件的名称，然后将其传递给component标签。

你还可以为每个keep-alive元素命名：

  <template>
        <keep-alive :include="cachePage">
            <router-view></router-view>
        </keep-alive>
  </template>
  
  <script>
  export default {
    data() {
      return {
        cachePage: ['home', 'about']
      }
    }
  }
  </script>

上面的代码中，我们将router-view标记包含在keep-alive元素内。我们还为它定义了include属性，值为一个数组。依此，路由路径为“home”和“about”的组件将缓存。这就是通过命名keep-alive标签来实现缓存的方式。

3.缓存生命周期函数

在缓存了一个组件之后，还可以使用生命周期钩子进行进一步的操作。

3.1activated

activated生命周期函数在组件被缓存后调用。当我们从其他路由切换到被缓存的组件时，activated函数会被执行。

  <template>
    <div v-if="show">
      This is a cached component!
    </div>
  </template>
  
  <script>
  export default {
    activated() {
      console.log('component activated')
    }
  }
  </script>

上面的代码中，show变量控制组件是否显示。当从其他路由切换回该组件时，activated函数将被执行，并在控制台中打印出 “component activated” 字符串。

3.2deactivated

deactivated生命周期函数在keep-alive包含的组件被离开时调用，同时当我们从被缓存的组件切换到其他路由时，deactivated将会被调用。

  <template>
    <div v-if="show">
      This is a cached component!
    </div>
  </template>
  
  <script>
  export default {
    deactivated() {
      console.log('component deactivated')
    }
  }
  </script>

上面的代码中，在 组件被离开或者 切换到其他路由时，deactivated函数将在控制台中打印出 “component deactivated” 字符串。

4.总结

在使用keep-alive组件时，可以使用include或exclude属性来命名包含或排除哪些组件进行缓存。此外，还可以使用activated和deactivated生命周期函数在缓存的组件被激活或取消激活时执行操作。