vue生命周期以及执行说明

以你之姓@ 2023-07-13 11:00 24阅读 0赞

> 前言  
> 写此文章的目的主要是为了记录一下自己的学习过程便于日后用来查漏补缺  
> 也希望能够帮助到一部分,如果在浏览的过程中您发现了错误希望您的及时帮忙改正，在此感谢！

### 什么是生命周期？ ###

世上所有的人、物、事都有属于他们的自己的生命周期，生命周期是指出生、成长过程、衰老、生病和死亡的过程。每个人、物、事都是按照这个过程执行没有谁能跳过其中任意一个环节，所以我们的程序也逃脱不掉。在生命周期不同的环节上我们都去值执行相对应的任务。  
引用官方文档的一张图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70][]

从上到下:  
1.new Vue(): 相当于 var vm = newVue(\{\}) 创建一个一个Vue的实例对象  
2.Init Events & Lifecycle : 初始化Vue对象，赋予默认的生命周期函数和默认的时间。其他的任何东西都没有创建  
3.beforeCreate：这是第一个生命周期函数，在实例未完全创建出来之前，会执行此方法  
4.created：这是第二个生命周期函数，此时Vue实例中的data和methods中的数据已经加载完毕，因此我们如果需要操作data中  的数据或者是调用methods中的方法时，最早在此调用。  
5.created到beforeMount之间：首先判断是否有el对象如果没有则挂载>是否有模板(有则转换为render函数，在通过render函数去渲染创建DOM，没有的话则编译el对象外层标签作为模板)  
6.beforeMount:这是第三个生命周期函数 render函数在此时被首次调用生成虚拟的DOM存放于内存中，往下再创建vm.$el并将其替换为真正的模板。  
7.mounted:这是第四个生命周期函数   此时模板已经挂载到了页面中，用户已经可以看到 渲染好的页面了。mounted是实例创建的最后一个生命周期函数，当执行完此函数时就表示实例已经被完全创建好了，如果没有其他的操作，这个实例就存在内存中。在往后就是运行时期的生命周期函数了。

8.beforeUpdate:这是第五个生命周期函数 数据有更新的时候会调用此方法,在此方法中表示数据已经更新了但是还没有同步到页面中。

9.update:这是第六个生命周期函数 表示更新的数据和页面中的数据已经同步了。

10.解除绑定，子组件以及事件监听器

11.调用destroyed最后一个生命周期函数，组件已销毁

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edg">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="修改msg" @click="msg='No'">
            <h3 id="h3">{
       { msg }}</h3>
        </div>
    </body>
    <script>
        //创建Vue实例,得到ViewMode
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'ok'
            },
            methods:{
                show(){
                    console.log('执行了show方法')
                }
            },
            beforeCreate(){ //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
                console.log(this.msg)
                this.show();
                //注意：在beforeCreate 生命周期函数执行的时候，data和methods中的数据都还没有被初始化
            },
            created(){//这是遇到的第二个生命周期函数
                console.log(this.msg)
                this.show();
                //在created 中 data和methods中的数据已经被初始化了
                //如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作。
    
            },
            beforeMount(){ //这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
               console.log( document.getElementById('h3').innerText)
            //在beforeMount 执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
            },
            mounted(){ //这是遇到的第4个生命周期函数，表示内存中的模板 已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
                console.log( document.getElementById('h3').innerText)
             //注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mouted 就表示，实例已经被完全被创建好了，此时，如果没有其他操作的话，这个实例就在内存中。
    
            },
    
            //接下来是运行中的两个事件
            beforeUpdate(){//这时候，表示我们的界面还没有被更新(数据被更新了)
                console.log('界面上元素内容:'+document.getElementById('h3').innerText)
                console.log('data中的数据:'+this.msg)
            },
            updated(){
                console.log('界面上元素内容:'+document.getElementById('h3').innerText)
                console.log('data中的数据:'+this.msg)
                //updated 事件执行的时候，页面和data数据已经同步了
            }
        })
    </script>
    </html>

## **当我加载完这个页面时看控制台的打印** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 1][]

## **当我点击事件时 控制台的打印** ##

![20200311204943964.jpg][]

注意箭头所指的两个位置,点击事件后修改数据此时页面上的数据没有改变，beforeupdae监听到数据变化开始执行由于console方法中的内容是根据标签内容去获取的所以是ok。而在update中则已同步更新了因为在update方法中数据和页面已经同步了。

以上便是本人对生命周期一些理解，希望有不对的地方请及时指正，不胜感激！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311202916493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200311204800213.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw,size_16,color_FFFFFF,t_70
[20200311204943964.jpg]: https://img-blog.csdnimg.cn/20200311204943964.jpg