Vue学习之旅Part6：通过例子和示意图弄懂Vue的八大生命周期

一、概述

Vue实例从创建 运行 到销毁期间 伴随着的各种各样的事件 这些事件 统称为生命周期

生命周期钩子就是生命周期事件的别名
生命周期钩子 = 生命周期函数 = 生命周期事件 这三个都是一样的东西 不过叫法不同而已

Vue总共分为三个大的生命周期 即：创建 运行 销毁
和人的一生也很像：出生 活着 死亡(跑题辽

主要的生命周期函数：

• 创建期间的生命周期函数：
  • beforeCreate：实例刚在内存中被创建出来
    此时还未初始化完毕data和methods
  • created：实例已经在内存中创建完毕
    此时 data和methods已经创建完毕 但此时还未开始编译模板
  • beforeMount：此时已经完成模板的编译
    但是还未挂载到页面中
  • mounted：此时已将编译好的模板挂载到了页面指定的容器中显示
• 运行期间的生命周期函数：
  • beforeUpdate：状态更新之前执行此函数
    此时data中的状态值是最新的 但界面上显示的数据还是旧的
    因为此时还未开始重新渲染DOM节点
  • updated：实例更新完毕之后调用此函数
    此时data中的状态值和界面上显示的数据都已完成了更新 界面已被重新渲染好了
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁前调用
    在这 实例仍然完全可用
  • destroyed：Vue实例销毁后调用
    调用后 Vue实例指示的所有东西都会解除绑定 所有的事件监听器会被移除 所有的子实例也会被销毁

二、从案例中看生命周期

案例的页面其实很简单：
有个按钮 点击会改变msg的值 目的是触发部分生命周期
然后有个显示msg的h3标签

<div id="app">
	<input type="button" value="Click me" @click="msg='Hi'">
	<h3 id="h3">{{msg}}</h3>
</div>

那么 不同的生命周期打印出的的数据是什么呢：

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           msg:"Hello"
       },
       methods:{
           say()
           {
               console.log("Hello World");
           }
       },
       // 第一个被执行的生命周期函数
       // 在实例被完全创建出来之前会执行它
       beforeCreate()
       {
           console.log(this.msg); // undefined
           this.say(); // 报错 未找到该方法

           // 在beforeCreate生命周期函数执行的时候 data和methods中的数据都还未被初始化
       },

       // 第二个被执行的生命周期函数
       created()
       {
           console.log(this.msg); // Hello
           this.say(); // Hello World

           // 在created生命周期函数执行的时候 data和methods中的数据都已经被初始化好了
           // 若要操作data中的数据或是调用methods中的方法 最早只能在created中操作
       },

       // 第三个被执行的生命周期函数
       // 此时 模板已经编译完成了 但只是存在于内存中 尚未将模板渲染到页面中
       beforeMount()
       {
           console.log(document.getElementById("h3").innerText); // {{msg}}

           // 在beforeMount生命周期函数执行的时候 内存中编译好的元素尚未被挂载到页面上
           // 因此 在页面上所显示的只是预先写好的模板字符串
       },

       // 第四个被执行的生命周期函数
       // 此时 内存中的模板已经真实挂载到了页面上
       // 用户可以看到渲染好的页面
       mounted()
       {
           console.log(document.getElementById("h3").innerText); // Hello

           // mounted是实例【创建】期间的最后一个生命周期函数
           // 当mounted被执行完 即代表该实例被完全创建好了 此时 若没有再进行其它操作 则该实例会一直存在于内存中
       },

       // ======开始运行中事件======
       // 在beforeUpdate生命周期函数执行的时候 此时 界面还没有被更新 但数据已经改变了
       beforeUpdate()
       {
           console.log(document.getElementById("h3").innerText); // Hello
           console.log(this.msg); // Hi

           // 当beforeUpdate的时候 页面的数据还是旧的 data的数据是新的
           // 此时页面的数据尚未和最新的数据保持同步
       },

       // 在updated生命周期执行的时候 页面和data的数据已经保持同步了 都是最新的数据
       updated()
       {
           console.log(document.getElementById("h3").innerText); // Hi
           console.log(this.msg); // Hi
       }
       // ======结束运行中事件======
    });
</script>

---

如果案例代码了解不够清楚 还可从示意图中看生命周期：

三、从示意图中看生命周期

图是我从Vue的官网扒的 自己加了点注释：

---