vue生命周期详解

介绍

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

生命周期图

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生命周期详解

销毁阶段

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

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。