Vue的生命周期函数

创建期间的生命周期函数:

beforeCreate()

在beforeCreate() 生命周期函数执行的时候, data 和 methods 中的数据都还没有初始化

页面显示

01.png

created()

在created中, data和methods已经初始化好了，如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作

页面显示

02.png

beforeMount()

表示模板已经编译完成,尚未把模板编译到页面中，在beforeMount 执行的时候, 页面中的元素,还没被真正替换过来,只是之前写的一些模板字符串

    
    
    
    
    



    

        
{{ msg }}
    

页面显示

03.png

Mounted()

这是遇到的第四个生命周期函数,便是,内存中的模板已经真实的挂在到页面中,用已经可以看到渲染好的数据了

    
    
    
    
    



    

        
{{ msg }}
    

页面显示

04.png

组件的运行阶段的函数

beforeUpdate()

当data发生改变的时候会触发，页面中的显示的数据,还是旧的,此时的 data是最新的,页面尚未和 最新的数据保持同步

    
    
    
    
    



    

        
        
{{ msg }}
    

页面显示

05.png

updated()

表示data改变之后，updated事件执行的时候,页面和data 数据已经保持同步了,都是最新的

    
    
    
    
    



    

        
        
{{ msg }}
    

06.png

组件的销毁阶段运行的函数

beforeDestory()

beforeDestory()执行的时候,实例身上所有的data和所有的methods，以及过滤器、指令.....都处于可用状态,此时还没有真正执行行销毁的过程

destroyed()

当执行到destoryed函数的时候，组件已经被完全销毁了，此时,组件中所有的数据、方法指令、过滤器....都已经不可以用了

lifecycle.png