Vue实例生命周期: Vue生命周期图示.
Vue生命周期图示生命周期函数就是vue实例在某一个时间点会自动执行的函数。
生命周期函数(钩子)有:
1、beforeCreate:初始化事件和生命周期相关内容完成后
2、created:处理外部注入(例如:双向绑定)后
3、beforeMount:初始化结束后,判断是否有el,是否有template,如果有则执行,如果没有将el内部的内容当做模板来执行。该函数在模板和数据相结合,即将挂载到页面上时执行
4、mounted:模板结合数据生成的最终的Vue实例里的DOM元素挂载到页面上之后执行,即页面渲染完成后
5、beforeDestroy:当 vm.$destroy()这个方法被调用后,组件即将销毁的时候调用
6、destroyed:组件被完全销毁后调用
7、beforUpdate:当数据发生改变,还没有重新渲染时执行
8、updated:数据发生改变后,已染后时执行
生命周期函数不放在methods里面,而是直接放在Vue实例里面。
更多:生命周期函数.
// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
el: "#app",
template: "<div>{{test}}</div>",
data: {
test: "hello world"
},
beforeCreate: function() { //beforeCreate:初始化事件和生命周期相关内容完成后
console.log("beforeCreate");
},
created: function() {。 //created:处理外部注入(例如:双向绑定)后
console.log("created");
},
beforeMount: function() { //beforeMount:初始化结束后,判断是否有el,是否有template,如果有则执行,如果没有将el内部的内容当做模板来执行。该函数在模板和数据相结合,即将挂载到页面上时执行
console.log(this.$el);
console.log("beforeMount");
},
mounted: function() { //mounted:模板结合数据生成的最终的Vue实例里的DOM元素挂载到页面上之后执行,即页面渲染完成后
console.log(this.$el);
console.log("mounted");
},
beforeDestroy: function() { //当 vm.$destroy()这个方法被调用后,组件即将销毁的时候调用
console.log("beforeDestroy");
},
destroyed: function() { //destroyed:组件被完全销毁后调用
console.log("destroyed");
},
beforeUpdate: function() { //beforUpdate:当数据发生改变,还没有重新渲染时执行
console.log("beforeUpdate");
},
updated: function() { //updated:数据发生改变后,已染后时执行
console.log("updated");
}
})