Vue生命周期详解

一、什么是生命周期

生命周期就是一个事物从出生到消失的过程。

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

 

 

 

二、钩子函数

1. 什么是钩子函数

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行。

 

2. 钩子函数的作用

特定的时间，执行特定的操作。

 

3. 各个钩子函数的用处

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

 

 

 

 

 

 

 

 

 

 

4. 示意图

 

 

5. 代码执行示例

<template>
   <div>
       <h3>生命周期函数</h3>
       <button @click="message='测试'">修改数据</button>
       <p>{{ message }}</p>
   </div>
</template>
 
<script>
    export default {
        name: "life",
        data(){
            return {
                message:"hello"
            }
        },
        beforeCreate()
        {
            console.log("beforeCreate -->创建前");
            console.log(this.message);
        },
        created(){
            console.log("created -->创建后");
            console.log(this.message);
        },
        beforeMount(){
            console.log("beforeMount --> 渲染前");
            console.log(this.message);
        },
        mounted(){
            console.log("mounted --> 渲染后");
            console.log(this.message);
        },
        beforeUpdate(){
            console.log("beforeUpdate --> 修改前");
            console.log(this.message);
        },
        updated(){
            console.log("updated --> 修改后");
            console.log(this.message);
        },
        beforeDestroy(){
            console.log("beforeDestroy --> 销毁前");
            console.log(this.message);
        },
        destroyed(){
            console.log("destroyed --> 销毁后");
            console.log(this.message);
        }
    }
</script>

 

 

 

三、可以执行异步请求的生命周期

created、beforeMount、mounted 。

在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，优点如下：

① 能更快获取到服务端数据，减少页面 loading 时间；

② ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

 

 

 

四、可以访问操作DOM的阶段

最早可以在mounted时期调用，该时期前Vue 已经将编译好的模板挂载到页面上。

 

 

 

五、父子组件里的生命周期执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程

  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

  父 beforeUpdate -> 父 updated

• 销毁过程

  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

 

 

 

六、父组件如何监听到子组件的生命周期

在父组件引用子组件时通过 @hook 来监听即可（举例mounted）

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

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    
    
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...