vue 组件生命周期

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。

组件生命周期分为11种：

1）创建  beforeCreate、created

2）挂载 beforeMount、mounted

3）更新 beforeUpdate、updated

4）activated、deactivated

5）销毁 beforeDestroy、destroyed

6）errorCaptured

钩子写法如下（只写了一个简单实例，调用其他的也这么写就可以）

         Vue.component('hed',{
             components:{aa},
             template:'<div><br>全局组件</div>',
             beforeCreate(){
               console.log('before-creat');
             },
             created(){
               console.log('creatde')
             },
             beforeMount(){
               console.log('before-mount')
             }
         })

         let a=new Vue({
            el:"#app",
            template:'<div>根节点<hed></hed></div>'
         })

  二、

created:

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。【在此生命周期阶段获取后端接口，调取数据】

mounted：

1.可以在此钩子里监听Window事件【window.addEventListener("")】，也就是在全部挂载完成之后进行监听

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

2.当调用mounted的时候所有的子组件都已经执行到mounted的了，所以在这个钩子下调用子组件的实例都是可以的了

updated:

在此钩子下获取DOM节点进行操作，因为这个时候的节点才是最新的

然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

destroyed: 

利用v-if写组件的销毁，写法如下

       let aa={template:'<div>局部组件</div>'}
       Vue.component('hed',{

             components:{aa},
             template:'<div><br>全局组件<aa></aa></div>',
             beforeDestroy() {
               console.log('before-destroy')
             },
             destroyed() {
               console.log('destroyed')
             }
         })

         let a=new Vue({
            el:"#app",
            data:{
              isHed:true
            },
            template:'<div>根节点<hed v-if="isHed"></hed></div>'

         })

 当v-if为false时组件就会进行销毁

 

生命周期示意图如下