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