Vue2（生命周期）

Vue生命周期函数

生命周期初识

Vue的生命周期是指Vue实例从创建到销毁所经历的一系列过程。在这个过程中，Vue提供了一系列的钩子函数（也称为生命周期钩子或生命周期事件），允许我们在Vue实例的不同阶段插入自己的代码，以实现特定的逻辑。

常见的八大生命周期

vue的生命周期主要分为四个阶段：创建阶段、挂载阶段、更新阶段、卸载阶段

创建阶段

beforeCreate：

• 组件实例刚被创建，组件属性计算之前，data和methods中的数据还没有初始化，此时无法访问到data、computed、watch、methods上的方法和数据。

created：

• 组件实例刚被创建，属性已绑定，但DOM还未生成。在这个阶段，我们可以访问到𝑑𝑎𝑡𝑎、𝑐𝑜𝑚𝑝𝑢𝑡𝑒𝑑属性，𝑤𝑎𝑡𝑐ℎ/𝑒𝑣𝑒𝑛𝑡事件配置完毕。然而，由于此时还没有挂载到𝐷𝑂𝑀上，所以无法访问到el属性目前不可见。

注：el属性

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app', // 指定Vue实例将要挂载的DOM元素
    data: {
      message: 'Hello Vue!'
    },
    template: '<div>{{ message }}</div>' // Vue模板
  })
</script>

挂载阶段

beforeMount：

• 模板编译/挂载之前，相关的render函数首次被调用。此时，Vue实例已完成以下配置：编译模板，把data里面的数据和模板生成HTML，但还没有挂载到页面上。

mounted：

• Vue实例已完成以下配置：用上面编译好的HTML内容替换el属性指向的DOM对象，完成模板中的HTML渲染到HTML页面中。

更新阶段

beforeUpdate:

• 组件更新之前，在数据更新之前调用。可以在这个钩子函数中进一步地更改状态，但需要注意的是，这不会触发附加的重渲染过程。

updated:

• 组件更新之后，在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。

卸载阶段

beforeDestroy：

• 组件销毁前调用，在实例销毁之前调用。实例仍然完全可用，可以在这里执行一些清理工作，如清除定时器、解绑事件等。

destroyed：

• 组件销毁后调用，在实例销毁之后调用。调用后，所有的事件监听会被移除，所有的子实例也会被销毁。此时，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也都会被销毁。

Vue中keep-alive的生命周期及用法

概念： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

原理：它的主要工作原理是将包裹的组件实例缓存起来，而不是在每次切换组件时都进行销毁和重新创建。这样做可以显著提高应用的性能，尤其是在需要频繁切换组件的场景下。（cache的缓存对象）

生命周期

activated:在组件被激活时调用，即组件被重新挂载到DOM上时。在组件第一次渲染时也会被调用。

deactivated: 在组件被停用时调用，即组件被从DOM上移除时。

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

缓存所有页面

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

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

根据条件缓存页面

<template>
  <div id="app">
  	// 1. 将缓存 name 为 test 的组件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正则表达式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	
	
	// 5.动态判断
	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 将不缓存 name 为 test 的组件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>

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

结合Router，缓存部分页面

在 router 目录下的 index.js 文件里

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        }
      ]
    }
  ]
})

在 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>