16vue学习——vue实例的生命周期_vue学习1.6—

本文链接：https://blog.youkuaiyun.com/weixin_42530160/article/details/97398674

16vue学习——vue实例的生命周期

前言

vue 的生命周期——Vue 实例从创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件便是这里所说的生命周期。同时生命周期 = 生命周期钩子 = 生命周期函数 = 生命周期事件，这些名词都是生命周期事件的别名而已，代表相同的概念。

生命周期函数分类

1. 创建期间的生命周期函数

（1）beforeCreate( ){ }: Vue 实例已经在内存中创建出来了。此时还没有初始化好 data 和 methods 属性。
（2）created( ){ }: Vue 实例已经在内存中创建出来了。data 和 methods 属性也已经初始化好了。此时还没有开始编译模板。
（3）beforeMount( ){ }: 此时已经完成了模板的编译，但还没有将编译好的模板挂载到指定的页面中显示。
（4）mounted( ){ }: 此时已经完成了模板的编译，也已经将编译好的模板挂载到指定的页面中显示。

2.运行期间的生命周期函数

（1）beforeUpdate( ){ }: 实例更新之前执行的函数，此时 data 中的数据是最新的，但是页面中显示的数据还是旧的。因为此时还没有开始重新渲染 DOM 节点。
（2）updated( ){ }: 实例更新之后执行的函数，此时 data 中的数据和页面中显示的数据都是最新的。因为此时的界面已经被重新渲染了。

3.销毁期间的生命周期函数

（1）beforeDestory( ){ }: 实例销毁之前执行的函数，此时的实例仍然完全可用。
（2）destoryed( ){ }: 实例销毁之后执行的函数。调用后, Vue 实例指示的所有东西都会被解绑，所有的事件监听都会被移除，所有的子实例也都会被销毁。

生命周期图示及讲解

各个钩子函数的代码解析

(1)beforeCreate 和 created 的比较

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 的生命周期函数</title>
</head>
<body>
    <div class="body">
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是用于介绍周期函数的文本内容",
            },
            methods:{
                show(){
                    console.log("我是执行show函数打印出来的");
                }
            },
            beforeCreate() {
                console.log("beforeCreate的结果");
                console.log(this.msg);
                this.show();

            },
            created() {
                console.log("created的结果");
                console.log(this.msg);
                this.show();
                console.log("");
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述
总结：
（1）beforeCreated时，Vue 实例已经在内存中创建出来了。此时还没有初始化好 data 和 methods 属性。所以此时输出 data 中的数据显示为 undefined ，调用 methods 中的方法显示为未定义。
（2）created时，Vue 实例已经在内存中创建出来了。data 和 methods 属性也已经初始化好了。所以此时可以正常显示 data 中的数据，也可以正常调用 methods 中的方法。

(1)beforeMount 和 mounted 的比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 的生命周期函数</title>
</head>
<body>
    <div class="body">
        <h3 id="h3">{{msg}}</h3>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是用于介绍周期函数的文本内容",
            },
            methods:{
                show(){
                    console.log("我是执行show函数打印出来的");
                }
            }
            beforeMount() {
                console.log("beforeMount的结果");
                console.log(document.getElementById("h3").innerText);
            },
            mounted() {
                console.log("mounted的结果");
                console.log(document.getElementById("h3").innerText);
            }, 
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述
总结：
（1）beforeUpdated时，实例更新之前执行的函数，此时 data 中的数据是最新的，但是页面中显示的数据还是旧的。所以显示的还是插值表达式
（2）updated时，实例更新之后执行的函数，此时 data 中的数据和页面中显示的数据都是最新的。所以可以真正显示出 data 中的数据。