一次性搞懂Vue生命周期的八大钩子函数

最新推荐文章于 2024-04-10 18:01:45 发布

在这之间

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量2.4w

点赞数 34

分类专栏：前端文章标签： vue java javascript js python

本文链接：https://blog.csdn.net/a_killer_/article/details/106591165

版权

前端专栏收录该内容

1 篇文章 2 订阅

订阅专栏

何为钩子函数？先看官方文档的说法：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

简单点来说，钩子函数就是你创建的Vue在初始化、更新数据、销毁时会被自动调用的函数。

八大钩子数分别是：

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed

接下来咱们慢慢来说

附官网声明周期图

先执行一段代码：注意这里的钩子名固定，与data和methods属于平级关系，如果执行相应的方法，会输出一句话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {},
            beforeCreate() {console.log("beforeCreate")},
            created() {console.log("created")},
            beforeMount() {console.log("beforeMount")},
            mounted() {console.log("mounted")},
            beforeUpdate() {console.log("beforeUpdate")},
            updated() {console.log("updated")},
            beforeDestroy() {console.log("beforeDestroy")},
            destroyed() {console.log("destroyed")},
            methods: {}
            });
    </script>
</body>
<html>

运行结果如下：

一、beforeCreate,created

beforeCreate可以简单的理解为在数据初始化的之前被调用，这时候data和methods尚未没有数据。

created可以理解为在数据初始化之后被调用，这时候data和methods已经被填充了相应的数据。

实验测试：（篇幅所限，只贴出来body中代码,head中代码没变化)

<body>
    <div id="app"></div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                msg:"在这之间"       //添加msg数据
            },
            beforeCreate() {
                console.log("this= "+this)  
                console.log("this.msg= "+this.msg)
                console.log("this.md= "+this.md)
                console.log("")
                },
            created() {
                console.log("this= "+this)  
                console.log("this.msg= "+this.msg)
                console.log("this.md= "+this.md)              
                console.log("")
                
                },
            methods: {
                md: function(){},        //空方法
            }
            });
    </script>
</body>

运行结果如下：

结果显示在beforeCreate方法与create方法之间完成了资源的注入。

二、beforeMount,mounted

上面实验已经证明Vue中数据已经注入完毕，beforeMount,mounted则是与页面渲染有关

beforeMount在页面尚未被渲染时使用，也就是Vue的数据没有传到页面。

mounted在页面渲染完成之后使用，也就是此时页面已完全取出Vue中的数据。

实验测试：

<body>
    <div id="app">
        <h1 id="ren">{{msg}}</h1>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                msg:"在这之间"       //添加msg数据
            },
            beforeMount() {
                let doc = document.querySelector("#ren");//查询到id名为ren的节点
                console.log(doc)   
                console.log("")
            },
            mounted() {
                let doc = document.querySelector("#ren");
                console.log(doc)   
            },
            });
    </script>
</body>

结果如下：

此时，Vue对象中资源已注入完毕，页面也已经渲染完毕，上述四个方法在页面被加载时自动被执行

三、beforeUpdate,updated

beforeUpdate在页面更新渲染完成后，DOM树发生改变前被调用

updated在页面DOM树改变后被调用

需要注意的是如果只是改变了dom中的数据（data），未对页面造成任何影响，就不会触发beforeUpdate,updated方法。

实验证明：

<body>
    <div id="app">
        <h1 id="ren">
            <p v-if="msg"></p>
        </h1>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                msg:true       //添加msg数据
            },
            beforeUpdate() {
                let a = document.getElementById("ren"); 
                console.log(a.childElementCount)
                console.log("")
            },
            updated() {
                let a = document.getElementById("ren"); 
                console.log(a.childElementCount)
            },
            });
    </script>
</body>

结果显示：

四、beforeDestory,destoryed

beforeDestory是在Vue组件销毁之前被调用

destoryed在Vue组件销毁之后被调用

这里为了搭建环境，引入了组件的概念（注意由于解析时自上而下，所以组件写在Vue对象前

实验证明：

<body>
    <div id="app">
        <mytest id="child" v-if="flag">
        </mytest>
    </div>
    <script>
        
        let myname = Vue.component('mytest', {
                template: '<p>yes</p>',

                beforeDestroy() {
                    console.log("beforeDestroy被执行")
                },
                destroyed() {
                    console.log("destroyed被执行")
                },
            });
        var vm=new Vue({
            el: "#app",
            data: {
                flag: true
            },
            components:{
                "mytest" : myname,
            },
            });

    </script>
</body>