由于暑假团队用vue做项目时,用到的钩子函数也只有mounted,(部分如下),主要是用来向后台请求数据。 其他的也没用到,而且当初对vue的生命周期也不理解,所以最近看了一些相关的文档,总结一下自己的收获,方便日后再次查阅。
1 2 3 4 5 6 7 8 9 10 11 12
| mounted () { // 向后台请求创建智能视图的限制条件 this.$store.dispatch('getSearchConditions').then(() => { this.$store.dispatch('openFile').then(() => { // 向后台请求创建智能视图的限制条件 this.$store.dispatch('getSearchConditions').then(() => { // 获取导入 Excel 表格的可选择磁盘 this.$store.dispatch('getImportTargetDisks') }) }) }) }
|
首先放上vue官方的描述生命周期的一张图。
总结起来就是分为如下几个阶段(vue 2.0)
了解了这些之后,我就试着用代码测试一下各个钩子函数的执行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| <div id="app-15"> <p>{{ a }}</p> <button @click="change">点我更新</button> </div> new Vue({ el: '#app-15', data: { a: 'haha' }, methods: { change: function () { this.a='xixi'; } }, beforeCreate: function() { console.log("创建前") console.log(this.a) console.log(this.$el) }, created: function() { console.log("创建之后"); console.log(this.a) console.log(this.$el) }, beforeMount: function() { console.log("mount之前") console.log(this.a) console.log(this.$el) }, mounted: function() { console.log("mount之后") console.log(this.a) console.log(this.$el) }, beforeUpdate: function() { console.log("更新前"); console.log(this.a) console.log(this.$el) }, updated: function() { console.log("更新完成"); console.log(this.a); console.log(this.$el) }, beforeDestroy: function() { console.log("销毁前"); console.log(this.a) console.log(this.$el) console.log(this.$el) }, destroyed: function() { console.log("已销毁"); console.log(this.a) console.log(this.$el) } })
|
##一. create 和 mounted 相关
运行之后,输出如下。
由结果可以看出
beforeCreate:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化 ,但el中的的值还没有渲染
mounted :完成挂载,渲染成haha。.
二. update相关
点击按钮。内容由haha变为xixi,从而触发update操作。
输出如下,由此可见,在更新视图时,beforeUpdate和updated钩子函数已经执行。
三. destory相关
在终端输入 app15.$destory()
输出如下
销毁完成后,我们再重新改变a的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。
##四.生命周期总结
网上提供了一些钩子函数的用法
beforecreate : 可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情(这个用法在项目中比较常见,用的较多)
beforeDestory: 可以弹出一个警告框,用于警告
destoryed :当前组件已被删除,清空相关内容