vue生命周期的学习总结

关于vue生命周期这块，官方给的图自己也是看了很久，但是也没看出来个啥。。。后来就看视频学习，看完阿视频后才明白原来官方就是官方，给的图看起来很繁琐但是理解了之后就会发现都是有逻辑在里面的，简洁又不失逻辑。下面是自己在学习vue生命周期的一些学习总结。

1、beforeCreated：初始化了一个空的Vue实例对象，只有一些默认的生命周期函数和默认事件

var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
        },
        methods:{
            show:function(){
                console.log("show函数可以被调用了");
            }
        },
        beforeCreate(){
            // 在beforeCreate生命周期函数中，data中的数据和methods中的方法都还没有被初始化
            console.log(this.msg);
            this.show();
        },

此时vue对象中的属性和methods还没被初始化，所以在这个生命周期函数中无法获取到data中的数据和methods中的方法。

 

2、created：初始化属性和methods，data中的数据和methods中的方法在这个阶段后就可以获取到了。

 created(){
            // 在created生命周期函数中，data中的数据和methods中的方法被初始化了，如果想操作data中的数据和方法，最早只能在created中操作
            console.log(this.msg);
            this.show();
        },

再到created生命周期函数中执行一下刚才在beforeCreate中的代码，结果显示成功，表示这时候vue实例的属性和methods已经初始化了。

 

3、beforeMount：挂载前调用，vue开始编译模版，在内存中生成一个最终编译好的模版字符串，然后把这个模版字符串渲染成内存中的DOM，但是这个模版是存在于DOM中的，并没有挂载到真正的页面上，

 //html
 

        
{{msg}}
        
    

 //js
        beforeMount(){
            // 模版已经在内存中编辑好了，但是并未渲染到页面
            // 在beforeMount执行的时候，页面中的元素还没有真正的被替换过来
            console.log(document.getElementById("h1").innerText);
        },

 

document.getElementById("h1").innerText的结果还是{{msg}}，表示页面上的内容实际上还没更改，因此但是这个模版是存在于DOM中的，并没有挂载到真正的页面上，

4、mounted：

el挂载到实例上后调用将内存中编辑好的模版渲染到页面上，实现挂载，mounted是实例创建期间的最后一个生命周期函数，到此为止，实例已经被完全创建

mounted(){
            //将内存中编辑好的模版渲染到页面上，实现挂载
            // mounted是实例创建期间最后一个生命周期函数，到此为止，实例就被完全创建了，
            console.log(document.getElementById("h1").innerText);

        },

同样的我们将beforeMount函数中的代码放到mounted函数中再次执行，结果显示，页面上的h1标签中的msg已经被渲染，和data中的一致。这个阶段，将上一阶段在内存中编译好的模版渲染到页面上。

5、beforeUpdate：

组件运行前后的生命周期函数，更新前调用。会根据数据的改变调用，当执行beforeUpdate时data中的数据已经更新，但是页面上的数据还是旧的，所以此时页面和data中的数据没有同步，

//html

        
{{msg}}
        
    

 beforeUpdate(){
            //页面中h1标签中的内容
            console.log(document.getElementById("h1").innerText);
            //data中的数据
            console.log(this.msg);
        },

 

结果表明在beforeUpdate这个阶段，当data中数据发生改变时，页面中的数据不会跟data中的数据同步。

6、updated：更新后调用，页面和data数据实现一致

  updated(){
            //页面中h1标签中的内容
            console.log(document.getElementById("h1").innerText);
            //data中的数据
            console.log(this.msg);
        },

 

我们再把beforeUpdate中的代码放到Updated中执行，结果如上图所示，表示页面中的数据和data中的数据实现同步了。

7、beforeDestory：实例销毁前调用，主要解绑一些监听事件等。执行beforeDestory函数时，就开始从执行阶段到销毁阶段了

8、destoryed：销毁后，数据，方法、指令已经被完全销毁