来一波Vue.js生命周期

虽然说生命周期各种博客都有写，但还是想来点属于自己的输出吧，用于自己对于生命周期的一个学习总结！

一、Vue生命周期的四个阶段

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

二、生命周期图示

一张来自官网的本人加工图。

图片上有8个生命周期的钩子函数，但是官网中给出了11个钩子函数，我们看下表格的介绍，里面给出10个钩子函数！

生命周期描述：

beforeCreate	组件实例被创建之初，组件的属性生效之前
created	数据初始化完成，组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，组件渲染完毕
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用deactivated
deactivated	keep-alive 专属，组件被销毁时调用
beforeDestory	beforeDestory
destoryed	组件销毁后调用

哪个钩子使用异步请求(也就是所谓的加载数据)：

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。不过最好能够在created中调用异步函数，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading 时间，因为这个时候数据已经被加载了；
• 查到SSR 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性

在什么阶段才能访问操作DOM？

在mounted钩子里，页面已经被渲染完毕，所以在 mounted 中可以访问操作 DOM！

说说keep-alive吧

• 一般结合路由和动态组件一起使用，用于缓存组件，大大的提高了页面的性能；
• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated，而且用了keep-alive，组件时不会被销毁的。

三、父子组件的钩子执行顺序

加载渲染过程

父子组件更新过程

 

父子组件的销毁

四、父组件怎么监听子组件的生命周期：

 比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

有两种方式

方式一：通过子组件向父组件使用$emit的方式，代码如下：

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

方式二：采用hook的方式，代码如下：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
}

附加:

在vue3中，生命周期发生了些许的变化：但是万变不离其宗，我也在努力的学习中~

我们稍微看看变化：

我们上面生命周期是 Vue2 中的生命周期，而在即将到来的 Vue3 中，Vue的生命周期发生了些许的变化，其对应关系如下：

- beforeCreate -> use setup()
- created -> use setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured

而且，在 Vue3 中，生命周期的使用方法也发生了变化，我么的生命周期同过按需加载的方式使用：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}