vue-cli keep-alive用法以及activated,deactivated

Posted wanan-01

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli keep-alive用法以及activated,deactivated相关的知识,希望对你有一定的参考价值。

 keep-alive用法

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

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/home/home‘
import Header from ‘@/components/home/header‘
import Citylist from ‘@/components/city/city-list‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘Home‘,
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/Header‘,
      name: ‘Header‘,
      component: Header,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
        path:‘/citylist‘,
        name:‘citylist‘,
        component:Citylist,
        meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]
})

这样就需要在app.vue中这样写

<template>
  <div id="app">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"/>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>

<style>
</style>

这样就实现了有效的控制是否缓存。

activated,deactivated

注意一点:activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中, activated 中的不管是否需要缓存多会执行。

 

以上是关于vue-cli keep-alive用法以及activated,deactivated的主要内容,如果未能解决你的问题,请参考以下文章

vue中keep-alive的作用

vue.js+vue-router+webpack keep-alive用法

vue-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等

vue列表缓存keep-alive

15《Vue 入门教程》Vue 动态组件 &amp;amp; keep-alive

vue-router 之 keep-alive