vue生命周期
2018-08-22 10:16
465 查看
var vm = new Vue({ el: '#app', data: { message: 'Vue的生命周期' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } })
相关文章推荐
- 关于Vue实例的生命周期created和mounted的区别
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- [问题探讨]vue父子组件的生命周期顺序
- vue生命周期的栗子
- Vue提高篇-生命周期及其钩子函数
- Vue.js的生命周期钩子
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- vue生命周期
- 关于VUe的生命周期小小的理解
- react vue的生命周期
- 【VueJS】Vue的生命周期(钩子函数)
- vue 入门和生命周期
- Vue实例的生命周期(钩子函数)
- vue教程2-01 vue生命周期、钩子函数
- VUE快速入门心得——Vue生命周期
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- VUE组件生命周期跟ajax的关系
- vue的生命周期
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue之生命周期