一、前言
在毕业旅行中思考，在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，不够甚解。网上大多是1.0的版本介绍，于是对vue2.0的生命周期做做文章。
二、vue生命周期简介
1.Vue在实例化一个组件的事后，会在特别的时期执行性相应的方法，这个方法，就叫做钩子方法。
2.Vue在实例化组件开始的时候，会按照顺序调用beforeCreated，created，beforeMounted，mounted方法。每个阶段组件内部的属性都是不一样的，比如created钩子时视图还没有渲染，就不能做一些dom操作。
3.一般来说，特定的钩子做特定的事。因为ajax是异步传输，ajax获取数据就可以在mounted阶段，也可以放在created，beforeMounted阶段。ajax之后的回调会放在事件队列的尾部，此时实例化组件整个过程会在ajax回调之前执行完毕。所以ajax操作放在created，mounted里面都是可以的。
| vue 1.0+ | vue 2.0 | Description |
|---|---|---|
| Init | beforeCreate | 组件实例刚被创建，组件属性计算值之前，如data属性等 |
| created | created | 组件实例创建完成，属性已绑定，但DOM还未完成，&el属性还不存在 |
| beforeCompile | beforeMount | 模板编译/挂载之前 |
| compiled | mounted | 模板编译/挂载之后 |
| ready | mounted | 模板编译/挂载之后（不保证组件已在document中） |
| - | beforeUpdate | 组件更新之前 |
| - | updated | 组件更新之后 |
| - | activivated | for keep-alive，组件被激活时调用 |
| - | deactivivated | for keep-alive，组件被激活时调用 |
| attached | - | |
| deattached | - | |
| beforeDestory | beforeDestory | 组件销毁前调用 |
| destory | destoryed | 组件销毁后调用 |
三、生命周期探究
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <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 : " + 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 : " + 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 : " + (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 : " + 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 : " + 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 : " + 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 : " + 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 : " + 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> </body> </html>- create 和 mounted
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载 - update
单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作 - destroy
销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但是原来生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了