Reprinted: http: //blog.csdn.net/qq_15766181/article/details/73549933
Hook is like the human birth to death into a stage, you must be a name in the birth stage, and not to a name or a death in the adult stage. Or do you want to go about gun birth stage, it is not acceptable. Component is the same, its internal structure is not the same for each stage. It is generally specific hooks to do specific things, such as ajax data can be acquired in the mounted stage.
A, vue lifecycle Profile
Life Cycle:
beforeCreate : EL and data did not initialize (this method is not commonly used)
the Created : the completion of the initialization data data, el initialization is not completed. Used to send ajax
beforeMount when :( implementation of this method has been completed and data initialization el (already given a corresponding value))
before the DOM rendering to confirm whether you want to compile the root element (whether el property), the talented continued to confirm whether the template attribute template, if there is a template attributes, will use templatethe value to replace the structure of the HTML, templatetemplates can be only one root element (and not text);
mounted :( when performing this method have been mounted on behalf of the end of a)
to compile good data element mounted to the DOM, and finally rendered DOM element transactions; real DOM has been rendered, the DOM may be operated
beforeUpdate : When data changes page-dependent trigger (DOM structure at this time has not reload)
Updated : DOM structure after reloading the trigger
调用vm.$destroy()之后触发下面两个事件：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。（可在此处清除定时器，清除事件绑定）
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。（意义不大）
咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对官方文档的那张图简化一下，就得到了这张图。
二、生命周期探究
对于执行顺序和什么时候执行，看上面图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。
<!DOCTYPE html>
<html>
<head>
<title>钩子函数</title>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="button" @click="change" value="更新数据" />
<input type="button" @click="destroy" value="销毁" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message : "Welcome Vue"
},
methods:{
change() {
this.message = 'Datura is me';
},
destroy() {
vm.$destroy();
}
},
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);//undefined
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:green","data : " + this.$data); //[object Object] => 已被初始化
console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue => 已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:green","el : " + (this.$el)); //已被初始化
console.log(this.$el); // 当前挂在的元素
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:green","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
alert("更新前状态");
console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
alert("更新前状态2");
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","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>
1. create 和 mounted
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
2. update
我们单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作。
ps:注意beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。注意观察弹窗就容易发现。
3. destroy
销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了。
我们单击页面中的“销毁”按钮，将指定的Vue实例销毁。
三、生命周期总结
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容