Vue生命周期与钩子函数
2018-09-23 00:25
701 查看
Vue官网的生命周期图
常用的八个钩子函数的解释
beforeCreated:组件实例刚刚被创建,组件属性计算之前,如data属性等。
created:组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在
beforeMount:模板挂载之前调用,$el的值为“虚拟”的元素节点
mounted:模板挂载之后调用,虚拟dom节点被真实的dom节点替换,于是在触发mounted时,可以获取到$el为真实的dom元素
beforUpdate:组件更新之前调用
updated:组件更新之后调用
beforeDestroy:组件销毁之前调用
destroyed:组件销毁之后调用
那么下面我们来进行测试一下
利用浏览器执行下面代码
[code]<section id="app-8"> {{data}} </section>
[code]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) } })
浏览器执行结果如下:
beforeMount和mounted的比较:
beforUpdate和updated:
beforeDestroy和destroyed:
总结一下,对官方文档的那张图简化一下,就得到了这张图
转自:https://www.geek-share.com/detail/2694449420.html
阅读更多
相关文章推荐
- 【Vue2.0】vue生命周期中的钩子函数
- vue生命周期中,钩子函数执行顺序
- vue2.0项目实战(4)生命周期和钩子函数详解
- vue生命周期中,钩子函数执行顺序
- vue.js生命周期钩子详解
- vue-router钩子beforeRouteEnter函数获取到this实例
- vue 中 created 和 mounted 钩子生命周期 问题
- Vue 生命周期钩子
- Vue指令的钩子函数使用方法
- Vue.js的生命周期钩子
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法
- vue 项目实战 (生命周期钩子)
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- 详解Vue 实例中的生命周期钩子
- Vue学习之 生命周期钩子
- react系列(6)组件生命周期钩子函数
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- vue学习基础之生命周期钩子
- vue.js中生命周期与相关函数的使用总结