vue生命周期详解

介绍

vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。学习实例的生命周期，能帮助我们理解vue实例的运行机制，更好地利用钩子函数完成我们的业务代码。下图说明了实例的生命周期、你不需要立马弄明白所有东西、不过随着你的不断学习和使用、它的参考价值会越来越高。

生命周期图

生命周期的探究

<!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>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
            <h1 id="text"> {{ msg }} </h1>
            <button @click="fn">按钮</button>
    </div>
    <script>
       const vm = new Vue({
            el:"#app",
            data:{
                msg:"大家好啊"
            },
            methods:{
                fn(){
                    this.msg = "你好、我好、她好"
                }
            },
            beforeCreate(){
                console.group("初始化前:beforCreate");
                console.log("挂载实例上的元素节点"+this.$el);
                console.warn("初始化前:beforCreate",this.msg,this.fn);
                console.groupEnd();
            },
            created(){
                console.group("初始化完成:created");
                // 这里初始化完成后就可以发送ajax 请求了
                console.log("在这里发送ajax请求发送ajax请求")
                console.log("挂载实例上的元素节点 "+this.$el+" this.$el");
                console.warn("初始化完成:created可以了",this.msg,this.fn);
                console.groupEnd();
            },
            beforeMount(){
                console.group("挂载前:beforeMount");
                console.log(this.$el);
                console.warn("挂载前:beforeMount", this.msg,this.fn);
                console.groupEnd();
            },
            mounted(){
                console.group("挂载完成:mounted");
                console.log(this.$el);
                console.warn("挂载完成:mounted", this.msg,this.fn);
                // 在这里获取到dom内容后就可以操作dom了
                console.groupEnd();
            },
            beforeUpdate(){
                // 获取的dom内容是:更新前的内容
                console.group("更新前:beforeUpdate");
                console.log(document.getElementById("text").innerText);
                console.log(this.$el);
                console.warn("挂载完成:beforeUpdate", this.msg,this.fn);
                console.groupEnd();
            },
            updated(){
                console.group("更新完成:updated");
                // 获取的内容是:更新后内容
                console.log(document.getElementById("text").innerText);
                console.log(this.$el);
                console.warn("更新完成:updated", this.msg,this.fn);
                console.groupEnd(); 
            },
            beforeDestroy(){
                console.group("销毁前:beforeDestroy");
                console.log(this.$el);
                console.warn("销毁前:beforeDestroy", this.msg,this.fn);
                console.groupEnd(); 
            },
            destroyed(){
                console.group("销毁完成:destroyed");
                console.log(this.$el);
                console.warn("销毁完成:destroyed", this.msg,this.fn);
                console.groupEnd(); 

                // 销毁后 代码将不再受vue来控制了 你改变msg值后 页面上也不会有改变了
            }

        })
    </script>
</body>
</html>
复制代码

初始化阶段

beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载这里created和mounted这两个阶段在开发中比较重要： created:bride_with_veil:我们一般会在这个阶段发送ajax请求。 mounted:construction_worker:这个阶段可以获取到dom的内容了，一般我们会在这个阶段操作dom

销毁阶段

销毁后代码将不再受vue来控制了你改变msg值后页面上也不会有改变