Vue生命周期对vue对象的影响
来源:互联网 发布:淘宝关键词竞争力公式 编辑:程序博客网 时间:2024/05/20 02:53
在查找资料的时候看到了vue的生命周期图,然后拿下来一下,相关链接:
https://segmentfault.com/a/1190000008010666
链接里面解释了不同时期vue内部的数据情况,但是没有解释vue对象的生成情况,对于链接中的代码:
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "xuxiao is boy" }, beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); console.log("%c%s", "color:red", "el : " + app); //undefined console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //undefined console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //undefined console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //undefined console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //已被初始化 console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //已被初始化 console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //已被初始化 console.log("%c%s", "color:red", "el : " + this); //已被初始化 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 : " + app); //已被初始化 console.log("%c%s", "color:red", "el : " + this); //已被初始化 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) } })</script>
其中的名字为app的vue对象,是在mounted状态之后才可用的,也就是说如果在beforeCreate、created、beforeMount、mounted这几个状态的时候使用app来访问数据或者调用方法,都是会报错的,因为app为空,但如何使用数据呢,这个时候就要用this了,this里面在created之后是有data值的,在这里也能看出来this和app还是有区别的
阅读全文
0 0
- Vue生命周期对vue对象的影响
- 对vue生命周期-钩子函数的理解
- Vue的生命周期
- 04.vue的生命周期
- Vue的生命周期
- vue的生命周期
- Vue.js的生命周期
- Vue实例的生命周期
- Vue.js的生命周期
- 关于Vue的生命周期
- vue的生命周期
- vue组件的生命周期
- vue生命周期的理解
- Vue的生命周期
- vue学习二 vue 的生命周期
- 【Vue】详解Vue生命周期
- 请详细说下你对vue生命周期的理解?
- Vue生命周期
- hibernate5初入门配置实例
- bootstrap的icheck插件使用
- MyBatis的映射文件mapper的select标签
- 微信公众号自动化
- Android O行为变更--隐式广播限制
- Vue生命周期对vue对象的影响
- URAL1040
- 构造器
- 用Java代码发qq邮件
- Java好文
- MongoDB数据库文档操作
- 优雅的单例
- 浅谈库存扣减和锁
- 正则表达式基础