vue生命周期详解

vue生命周期分为八个阶段：创建前后/挂载前后/更新前后/销毁前后

beforecreate和create钩子函数间的生命周期：检测数据，来检测数据是否变化了，然后初始化事件；

create和beforemount钩子函数间的生命周期：

     首先判断有没有el选项：

     1.如果没有的话就暂时停止了生命周期，等待vm.$mount(el)（或手动添加）；

     2.如果有的话，继续往下编译，然后判断有没有template参数选项：

            2.1如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数

           2.2如果没有的话，那么外部的HTML作为编译模板（template）。（由此可见，实例内部的template模板要比外部的HTML模板的优先级要高）

            2.3如果上面两个条件都不满足，则报错

                注意：为什么判断el要在判断template之前呢？（因为vue实例先通过给定el的参数才能找到对应的template参数。Vue通过el参数去找到对应的template。然后,根据el参数给出的“选择器”，首先去Vue实例对象本身的template选项参数中找，如果没有template参数，则到外部HTML中寻找，找到后将模板编译成render函数）

beforemount和mount钩子函数间的生命周期：

   正因为render函数和template选项的“优先级”比外部HTML要高，所以，最后一般会存在一个外部HTML模板被Vue实例本身配置的模板所“替代”的过程也就是上图所说的 “replace。

beforeupdate和update钩子函数间的生命周期：

   vue中，数据的更改会导致虚拟dom重新渲染，并调用这两个钩子函数；（但要注意一点：重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！（这点很重要））。只有vue数据被写入模板中，它的改变才能被追踪的到，进而调用这两个钩子。

beforedestroy和destroy钩子函数间的生命周期：

destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

借鉴博主外婆的彭湖湾（https://www.cnblogs.com/penghuwan/p/7192203.html）

  自己用到的生命周期钩子：

      mounted：利用这个生命周期钩子，去监听一个bus的改变。

     例子 

Vue.component('child',{
   methods:{
      handleClick:function(){
        this.bus.$emit('change',this.content);
}}});

var vm=new Vue({
     ...
    mounted:function(){
     var _this=this;
     _this.bus.$on('change',function(msg){
          _this.content=msg;})}
 })