生命周期钩子 就是vue实例从创建到销毁的过程,在某一时间点自动执行的函数
- beforeCreate 开始初始化 vue实例的挂载元素$el和数据对象data都为undefined
- created 初始化完成 vue实例的数据对象data有了,$el还没有,可以进行computed.watch监听
之后询问是否有el,template - beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点
- mounted vue实例挂载完成,data渲染完成
- beforeUpdate data发生变化时执行
- updated 发生变化的data,重新渲染到dom元素上之后
- beforeDestroy销毁前 vm.$destroy();
- destroyed销毁完成 vue实例解除了事件监听以及和dom的双向绑定(无响应了),但DOM节点依旧存在
var vm=new Vue({//创建vue实例
el:'#root',
data:{
msg:'Hello world'
},
beforeCreate:function(){
console.log(this.$el);//undefined
console.log(this.$data);//undefined
},
created:function(){
console.log(this.$el);//undefined
console.log(this.$data);//obj
},
beforeMount:function(){
console.log('beforeMount');
console.log(this.$el);//<div id="root">{{msg}}</div>
},
mounted:function(){
console.log('Mounted');
console.log(this.$el);//<div id="root">Hello world</div>
},
beforeDestroy:function(){
console.log('开始销毁')
},
destroyed:function(){
console.log('销毁完成')
},
beforeUpdate:function(){
console.log('beforeUpdate')
},
updated:function(){
console.log('updated')
}
})