vue生命周期钩子 （mounted 加载数据没有缓存用 activated 配合keep-alive组件）

beforecreated： 创建前状态   el 和 data 并未初始化 

created: 创建完毕状态    完成了 data 数据的初始化，el没有

beforeMount：挂载前状态   完成了 el 和 data 初始化     而且  el还是 {{data变量名}}   （虚拟dom技术  先占位）

mounted ：完成挂载

beforeUpdate  更新前状态

updated  更新完成状态

beforeDestroy  销毁前状态

destroyed　　销毁完成状态

activated   组件在激活状态时调用

deactivated 组件被移除时调用

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

2. activated   使用

mounted中请求数据

每次进入页面都会发起一个请求，这样对网页性能优化是不利的，那怎样可以避免这种情况呢？vue推荐在<routr-view/>组件上面包裹一层keep-alive组件

 
<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

这样在数据没有发生改变的情况下可以大大降低网络请求的时间从而提高网站性能

但是对于某些页面来说，如动态路由，需要根据接收的不同参数来获取不同的数据那怎么办呢？

其实vue2.0版本后，keep-alive内置组件已经封装了两个属性，include和exclude表示那些组件需要缓存那些组件不需要缓存，用法大致如下:

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>
 
<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>
 
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>
 
<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

还有一种方法我们可以动态配置路由，来确定那些路由需要缓存哪些不需要缓存，这样的话就需要修改route文件下的index.js文件：

 
 
import Vue from 'vue'
import Router from 'vue-router'
 
/*import Home from '@/containers/home/index'
import List from '@/containers/list/index'
import Detail from '@/containers/detail/index'
import Person from '@/containers/person/index'*/
 
const Home = resolve => require(['@/containers/home/index'], resolve);
const List = resolve => require(['@/containers/list/index'], resolve);
const Detail = resolve => require(['@/containers/detail/index'], resolve);
const Person = resolve => require(['@/containers/person/index'], resolve);
 
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home ,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },{
      path: '/list',
      name: 'List',
      component: List,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },{
      path: '/detail',
      name: 'Detail',
      component: Detail,
      meta: {
        keepAlive: false // 不需要被缓存
      }
    },{
      path: '/person',
      name: 'Person',
      component: Person,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
  ]
})
 
 

然后在app,vue文件下修改一下keep-alive组件的用法，这样是不是写起来很方便呢？

 
//App.vue
 
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
 
<script>
  export default {
    name: 'App'
  }
</script>
 
<style>
</style>
 
 

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

参考链接 https://blog.csdn.net/buddha_itxiong/article/details/81069087