vue 生命周期
2020-02-02 12:24
1026 查看
vue 生命周期图
实验
<section id="app-8"> {{data}} </section>
var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========") console.log(this.data) console.log(this.$el) }, created:function(){ console.log("已创建========") console.log(this.info) console.log(this.$el) }, beforeMount:function(){ console.log("mount之前========") console.log(this.info) console.log(this.$el) }, mounted:function(){ console.log("mounted========") console.log(this.info) console.log(this.$el) }, beforeUpdate:function(){ console.log("更新前========"); }, updated:function(){ console.log("更新完成========"); }, beforeDestroy:function(){ console.log("销毁前========") console.log(this.info) console.log(this.$el) }, destroyed:function(){ console.log("已销毁========") console.log(this.info) console.log(this.$el) } })
------
知识点
由上图可知:
1、beforeCreate 此时$el、data 的值都为undefined
2、创建之后,此时可以拿到data的值,但是$el依旧为undefined
3、mount之前,$el的值为“虚拟”的元素节点
4、mount之后,mounted之前,“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发mounted时,可以获取到$el为真实的dom元素()
myVue.$el===document.getElementById("app-8") // true
接着,在console中修改data,更新视图
触发beforeUpdata 和updated
接着,执行myVue.$destroy()
总结一下,对官方文档的那张图简化一下,就得到了这张图
文章中若有错误请指出,转载请注明出处,谢谢~
原文
原文 https://www.cnblogs.com/gagag/p/6246493.html
转载于:https://www.cnblogs.com/Seven-cjy/p/10811346.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue笔记:生命周期和钩子函数
- vuejs组件的生命周期
- vue生命周期、钩子理解
- vue学习(二) vue生命周期 vue自定义指令和过滤器
- Vue学习3-7.生命周期;8.自定义指令;9.过滤器;10.路由
- 简述vue的生命周期
- vue组件的生命周期
- vue生命周期、computed属性和 method方法、watch 属性区别
- vue生命周期函数
- Vue.js组件的生命周期和自定义过滤器+小拓展slot
- vue的生命周期
- Vue生命周期整理
- vue2.0生命周期以及钩子函数使用规则及例子
- 关于VUe的生命周期小小的理解
- vue生命周期详解
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Vue--生命周期
- 【Vue】详解Vue生命周期
- vue2.0+基础知识连载(11)--- 生命周期