vue实例的生命周期函数

所谓生命周期函数就是vue实例在某个时间点"自动执行"的函数

1、当vue实例在进行部分初始化之后自动执行beforeCreate生命周期函数

beforeCreate:function(){
                    console.log("beforeCreate")
                }

2、当执行完beforeCreate生命周期函后会自动执行created生命周期函数

created:function(){
                    console.log("created")
                }

3、模板和数据相结合即将挂载到页面上的一瞬间之前的这个时间点上执行beforeMount生命周期函数

// 此时页面还没有被渲染
beforeMount:function() {
                    console.log("beforeMount")
                }

4、模板和数据相结合即将挂载到页面上之后会执行mounted生命周期函数

// 此时页面已经渲染完毕
mounted:function(){
                    console.log("mounted")
                }

5、当组件被完全销毁的时候会执行beforeDestroy生命周期函数

// $destroy()方法可以销毁vue的实例
// 此时vue的实例并未完全销毁
beforeDestroy:function(){ console.log("beforeDestroy") }

6、当组件被完全销毁之后会执行destroyed生命周期函数

// 此时vue的实例已经被完全销毁
destroyed:function(){
                    console.log("destroyed")
                }

7、当数据发生改变还没有发生渲染之前会触发beforeUpdate生命周期函数

// 此时页面改变后还没有被渲染完毕
beforeUpdate:function(){
                    console.log("beforeUpdate")
                }

8、当数据发生改变还没有发生渲染之前会触发updated生命周期函数

// 此时页面改变后已经被渲染完毕
updated:function(){
                    console.log("updated")
                }

总结:
1、生命周期函数就是vue实例在某个时间点"自动执行"的函数(不用调用)
2、vue实例的生命周期函并不放在methods里,并且可以单独放在vue的实例里

posted @ 2020-11-03 15:56  史小坑  阅读(413)  评论(0编辑  收藏  举报