vue生命周期
Vue实例的生命周期
就像一个人，从出生到死亡会经历童年、少年、青年、中年、老年各个阶段。如果你是上帝，你可以让他童年做着无忧无虑的事情、少年用功读书、青年到处游学、中年娶妻生子、老年儿孙满堂。
Vue.js让你有了上帝之手，可以操纵Vue实例的整个生命周期。
一、生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
-
例如，实例需要：
- 配置数据观测(data observer)
- 编译模版、挂载实例到 DOM
- 在数据变化时更新 DOM
-
在这个过程中，实例也会调用一些生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。比如，created 这个钩子在实例被创建之后被调用：
var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // -> "a is: 1" 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。
二、Vue1.0-实例生命周期图示
vue1.0生命周期.png
- 生命周期中钩子函数介绍：
beforeCreate: function () {
// 在实例初始化之后，数据观测(data observer)
和 event/watcher 事件配置之前被调用。
},
created: function () {
// 实例已经创建完成之后被调用。
在这一步，实例已完成以下的配置：数据观测(data observer)，
属性和方法的运算， watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。
},
beforeCreate: function () {
// 在实例初始化之后，数据观测(data observer) 和 event/watcher
事件配置之前被调用。
},
mounted: function () {
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时
vm.$el 也在文档内。
},
beforeUpdate: function () {
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
// 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
},
update: function () {
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，
所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，
你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
},
// <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
activated: function () {
// keep-alive 组件激活时调用。
},
deactivated: function () {
// keep-alive 组件停用时调用。
},
beforeDestroy: function () {
// 实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed: function () {
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
所有的事件监听器会被移除，所有的子实例也会被销毁。
}
- 上图中比较常用的钩子：
created：vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);
beforeCreate：给个loading界面 created撤销loading;
beforeDestory：当移除当前组件的时候调用
destoryed：当前组件已被删除，清空相关内容
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
<script>
window.onload = function () {
var vm=new Vue({
el:'body',
data:{
msg:'well'
},
created:function(){
alert('实例已经创建');
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
/*点击页面销毁vue对象*/
document.onclick=function(){
vm.$destroy();
};
}
</script>
三、Vue2.0-实例生命周期图示
vue2.0生命周期.png
