关于Vue生命周期

前言

在使用Vue框架时，熟悉生命周期是非常重要的，接下来就来全面认识理解一下Vue的生命周期钩子函数。

---

钩子函数

首先，我们来理解一下钩子函数的含义，它翻译成hook，在Vue中是一种事件劫持机制，就是说它会比你的事件更早进行执行处理，而且可以让你自己去配置。
对应的就存在一个回调函数，回调函数其实就是调用者把回调函数的函数指针传递给调用函数，当调用函数执行完毕时，通过函数指针来调用回调函数。
回调函数和钩子函数都是在消息处理机制中必不可少的，从根本上，它们都是为了捕获信息而生，但不同的是，钩子函数在捕获信息的第一时间就会执行，而回调函数是在整个捕获过程结束时，最后一个才被执行的。

---

生命周期探究

上图是Vue旧版和Vue2.0的钩子函数，再附上官方的一张生命周期图

看完上面这两张图以后，应该会对生命周期有一个基本的了解了。下面来进行实际代码的测试，更好的理解各个钩子函数。

  beforeCreate:function(){
    alert("组件实例化之前执行");
  },
  created:function(){
    alert("组件实例化完毕，但页面还没有显示");
  },
  beforeMount:function(){
    alert("组件挂载前，页面还没有显示，虚拟DOM已经配置");
  },
  mounted:function(){
    alert("组件挂载后，此方法执行后，页面显示");
  },
  beforeUpdate:function(){
    alert("组件更新前，页面还没有展示，虚拟DOM已经配置");
  },
  updated:function(){
    alert("组件更新，此方法执行后，页面显示");
  },
  beforeDestory:function(){
    alert("组件销毁前");
  },
  destory:function(){
    alert("组件销毁");
  }

在methods后面加入以上函数，可以在页面中刷新，一步一步调试查看函数的加载模式。
先执行 beforeCreate–>created–>beforeMount–>mounted
当data中的值发生变化时，执行
beforeUpdate–>updated
当组件销毁时，执行
beforeDestroy–>destroyed。

从上面的结果可以看出：

1. 初始化组件时，会执行beforeCreate/created/beforeMount/mounted四个钩子函数
2. 切换组件时（当前组件未缓存），会执行beforeDestroy/destroyed钩子函数
3. 初始化和销毁的钩子函数只会执行一次，更新的钩子函数beforeUpdate/updated可多次执行。

---

总结

现在已经简单的介绍完了关于生命周期的知识了，那在实际应用中，我们如何使用它们呢？

beforeCreate ：可以加入loading事件，动画之类的事件；
created ：可以获取数据，进行函数初始化等等；
mounted ：从后台获取数据等；
beforeDestroy ：是否确认退出；

还有更多的使用方法，期待大家去探索。