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

小灰灰 2023-05-21 13:58 4阅读 0赞

# 一、概述 #

**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的官网扒的 自己加了点注释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]: /images/20230521/55dc90f168cc4aa8bc931c326c7ba9af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue学习：vue生命周期

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

矫情吗；*/ 2023年10月04日 19:46/ 0 赞/ 100 阅读

相关 Vue 学习笔记之生命周期

文章目录 Vue 的生命周期函数什么是生命周期函数 Vue 的生命周期函数

末蓝、/ 2023年06月10日 13:25/ 0 赞/ 195 阅读

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

一、概述 Vue实例从创建运行到销毁期间伴随着的各种各样的事件这些事件统称为生命周期生命周期钩子就是生命周期事件的别名生命周期钩子 = 生命周期函数

小灰灰/ 2023年05月21日 13:58/ 0 赞/ 5 阅读

相关 Vue学习之旅Part3：Vue的全局过滤器和私有过滤器

Vue允许自定义过滤器可被用作一些常见的文本格式化过滤器可以用在两个地方：mustache插值表达式和 v-bind表达式过滤器应被添加在JavaScript表达式

不念不忘少年蓝@/ 2023年05月21日 11:48/ 0 赞/ 41 阅读

相关 React学习之旅Part8：通过例子和示意图弄懂React的生命周期

一、概述什么是生命周期每个组件的实例从创建到运行再到销毁在这个过程中的特定阶段会触发一系列的事件这些事件就叫做组件的生命周期函数 React的组件生

ゝ一纸荒年。/ 2023年02月16日 09:22/ 0 赞/ 6 阅读

相关一文带你弄懂Vue八大生命周期钩子函数

一.速识概念：我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。按照官方的原话

女爷i/ 2022年10月05日 05:52/ 0 赞/ 244 阅读

相关 vue学习（三）vue的生命周期

1，vue的生命周期图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

朱雀/ 2022年04月22日 09:02/ 0 赞/ 255 阅读

相关 HttpModule生命周期示意图

![o_HttpModule_E7_94_9F_E5_91_BD_E5_91_A8_E6_9C_9F_E7_A4_BA_E6_84_8F_E5_9B_BE.gif][] 转载

男娘i/ 2021年12月12日 09:59/ 0 赞/ 266 阅读

相关 Vue学习之实例生命周期

通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下 var vm = new Vue({...}) 那么这个Vue实例的生命周期是怎么样的

刺骨的言语ヽ痛彻心扉/ 2021年11月30日 01:16/ 0 赞/ 398 阅读

相关 VUE八大生命周期

vue.js生命周期的八大状态： 1. beforeCreate（创建前） 2. created（创建后） 3. beforeMount(载入前) 4. moun

╰+哭是因爲堅強的太久メ/ 2021年09月17日 00:32/ 0 赞/ 365 阅读