Vue中的生命周期（浅谈）

约定不等于承诺〃 2022-04-17 00:15 253阅读 0赞

**Vue中的声明周期是什么？**

vue实例从创建到销毁的过程称之为vue的生命周期

**用Vue框架，熟悉它的生命周期可以让开发更好的进行。**

**首先先看看官网的图，详细的给出了vue的生命周期:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70][]

接下来我们就根据上面那张图来分析分析模拟一下执行生命周期

它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

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=edge">
        <title>life cycle</title>
        <script src="./node_modules/vue/dist/vue.min.js"></script>
    </head>
    
    <body>
        <div class="container">
            <button @click = "msg = '我是updated周期'"></button>
            {
       { msg }}
        </div>
    </body>
        <script>
            // 我们可以看图
            // https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
    
            let vue = new Vue({
                el : ".container",
                data : {
                    msg : "咳咳咳，lifecycle"
                },
                methods : {
                    show() {
                       return "我是lifecycle methods";
                    }
                },
                // #####    组件创建的生命周期
                // 1.首先我们创建了一个vue 实例new Vue    var vue = new Vue
                // 2.我们遇到的第一个生命周期
                //      beforeCreate    初始化vue 实例 只有默认的一些生命周期函数和
                //      默认事件，其它都为创建好
                //      在beforeCreate的时候  data和methods还没有初始化
    
                beforeCreate () {
                    console.log(this.msg);
                    console.log(this.show);
                    // 输出undefined
                },
    
                // 3.遇到第二个生命周期created     data和methods都已经初始化完毕
                //          如果要操作data和methods的数据最好在created中操作
                created() {
                    console.log(this.msg);//输出 咳咳咳，lifecycle
                    console.log(this.show()); //输出  我是lifecycle methods
                } ,     
    
                // 4.我们进入判断，有 `el` 吗？ 有  在继续问有template吗?  
                // 有    将模板编译成function
                // 没有   自动编译成模板
                // 这个编辑模板   把vue的指令都执行完毕形成一个最终的字符串模板存放在
                // 内存当中，只是渲染好了模板，并没有挂载到DOM树上面
    
    
                // 5.我们遇到第三个生命周期函数  beforeMount
                // 这个时候我们的模板还在内存当中，并没有渲染到页面当中
                // 所以这个时候的数据还是旧的
                beforeMount() {
                    console.log(document.querySelector(".container").innerText);
                    //输出 {
       { msg }}
                    // 这个时候页面是之前的html数据
                    // 并没有渲染新的数据
                },
                // 6.我们遇到了第四个生命周期函数 Mounted
                // 这个时候我们的页面数据已经render最新的了
                // 表示实例化完毕
                // 组件创建生命周期结束
                // 开始执行生命周期阶段
                mounted() {
                    console.log(document.querySelector(".container").innerText);  
                    //输出 哈哈，我是lifecycle   
                },
                // 7.##########我们开启   执行组件生命周期阶段(数据更新才执行)
                
                // 执行生命周期可以执行次数 0 - 正无求大
                // 因为数据没更新就不会执行  而且数据可以一直更新
                // 7.1  首先我们要判断数据有没有进行        页面之间的数据的传递 数据发生改变了吗
                //      经历了数据执行了吗
                // beforeUpdate生命周期阶段
                // 这个时候我们的数据进行了改变
                // 但是beforeUpdate阶段的页面上的数据还是旧的  并没有渲染新数据
                beforeUpdate() {
                    console.log(document.querySelector(".container").innerText);
                    // 页面上的数据是： 哈哈哈，lifecycle
                    console.log(this.msg);
                    // 而组件里面的数据是：  我是updated周期
                },
                
                // 8.我们遇到的生命周期     updated
                // 这个时候页面上的数据是最新的   进行了更新
                // 进行了  M层 ->   V层的更新
                updated() {
                    console.log(document.querySelector(".container").innerText);
                    // 页面上的数据是： 我是updated周期
                    console.log(this.msg);
                    // 而组件里面的数据是：  我是updated周期
                },
    
                // 9.我们的组件执行生命周期结束
                // #########开始执行销毁生命周期
                /*
                beforeDestroy   当执行已经进行了销毁lifecycle阶段   
                                但是data,methods,filters,directives等等还并没有销毁
                                都是出于可执行状态
    
                destroyed       当执行到destroyed周期函数的时候，组件已经完全被销毁了
                                data,methods,filters,directives等等都不可用
    
                */
    
            });
            
        
        </script>
    
    
    </html>

这就是我对生命周期的理解，很简单吧。

如果有其它意见或者我说的不太明白的  望君评论留言  可以一起讨论

想看更多点击[我的博客][Link 1]

推荐[vue快速生成代码片段][vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70]: /images/20220417/1d7727d2181b4244b8ce42ce4556fc5b.png
[Link 1]: https://blog.csdn.net/qq_40428678
[vue]: https://blog.csdn.net/qq_40428678/article/details/83781769