前端性能优化之vue-keepAlive

（一):普通组件缓存三种写法

    <!-- 组件缓存的第一种写法: 字符串逗号分隔符-->
    <!-- <keep-alive include="ComA">
       <componnet :is="status"></componnet>
    </keep-alive> -->
    <!-- 组件缓存的第二种写法:正则表达式的写法 // -->
    <!-- <keep-alive :include="/ComA/">
       <componnet :is="status"></componnet>
    </keep-alive> -->
    <!-- 组件缓存的第三种写法：数组的写法  -->
    <keep-alive :include="['ComA']">
       <componnet :is="status"></componnet>
    </keep-alive>
      那么与之相反的就是exclude组件不缓存

1: ComA组件

<template>
  <div class="coma">
    <h1>组件A</h1>
    <h2>时间戳A: {{date}}</h2>
  </div>
</template>

<script>
export default {
  name: 'ComA',
  data() {
    return {
      date: Date.now()
    }
  },
  methods: {

  },
  mounted() {

  },
  activated() {
    console.log("组件A的activated被触发") // 激活组件进入时被触发
  },
  deactivated() {
    console.log("组件A的deactivated被触发") // 激活组件离开时触发
  }
}
</script>

<style>

</style>

2：ComB组件

<template>
  <div class="comb">
    <h1>组件B</h1>
    <h2>时间戳B: {{date}}</h2>
  </div>
</template>

<script>
export default {
  name: 'ComB',
  data() {
    return {
      date: Date.now()
    }
  },
  methods: {

  },
  mounted() {

  },
  activated() {
    console.log("组件B的activated被触发") // 激活组件进入时被触发
  },
  deactivated() {
    console.log("组件B的deactivated被触发") // 激活组件离开时触发
  }
}
</script>

<style>

</style>

效果图,可以看到每次切换都会触发activated和deactivated的生命周期钩子函数，

（二):路由组件缓存

1：app.vue

 <template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive'></router-view>
    </keep-alive>
    <router-view v-if='!$route.meta.keepAlive'></router-view>
  </div>
</template>

2. router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      keepAlive: true // 需要缓存的组件
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta: {
      keepAlive: false // 不需要缓存的组件
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition //模仿前进或者后退按钮返回，简单地让页面滚动到顶部。
    } else {
      return { x: 0, y: 0 }
    }
  }
})

export default router

效果图