c语言中的钩子函数,生命周期（vue的钩子函数）

生命周期图示

创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后

beforeCreate:function(){

console.log('1-beforeCreate 组件还未被创建');

},created:function(){

console.log('2-created 组件已被创建');

},beforeMount:function(){

console.log('3-beforeMount 组件已创建但还未挂载到DOM节点上');

},mounted:function(){

console.log('4-mounted 组件已挂载到DOM节点上');

},beforeUpdate:function(){

console.log('5-beforeUpdate 数据更新前');

},updated:function(){

console.log('6-updated 被更新后');

},activated:function(){

console.log('7-activated');

},deactivated:function(){

console.log('8-deactivated');

},beforeDestroy:function(){

console.log('9-beforeDestroy 组件即将被销毁');

},destroyed:function(){

console.log('10-destroyed 组件已经被销毁')

}

销毁

beforeCreate:el和data并未初始化

created:完成了data数据的初始化，el没有

beforeMount: 完成了el和data初始化

mounted: 完成挂载

beforeCreate:function(){

console.log('1-beforeCreate 组件还未被创建');

console.log("%c%s","color:red","el : " + this.$el); //undefined

console.log("%c%s","data : " + this.$data); //undefined

console.log("%c%s","message: " + this.message)//undefined

}

created:function(){

console.log('2-created 组件已被创建');

console.log("%c%s","el : " + this.$el); //undefined

console.log("%c%s","data : " + this.$data); //已被初始化

console.log("%c%s","message: " + this.message); //已被初始化

}

beforeMount:function(){

console.log('3-beforeMount 组件已创建但还未挂载到DOM节点上');

console.log("%c%s","el : " + (this.$el)); //undefined

console.log(this.$el);

console.log("%c%s","message: " + this.message); //已被初始化

}

beforeMount 在.vue文件中el还没被创建

beforeMount: function () {

console.log('beforeMount 挂载前状态===============》');

console.log("%c%s","el : " + (this.$el));//已被初始化

console.log(this.$el);

console.log("%c%s","data : " + this.$data);//已被初始化

console.log("%c%s","message: " + this.message);//已被初始化

}

beforeMount在html文件中el已被初始化

mounted:function(){

console.log('4-mounted 组件已挂载到DOM节点上');

console.log("%c%s","el : " + this.$el); //已被初始化

console.log(this.$el);

console.log("%c%s","message: " + this.message); //已被初始化

}

总结

以上是编程之家为你收集整理的生命周期(vue的钩子函数)全部内容，希望文章能够帮你解决生命周期(vue的钩子函数)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！