谈谈vue生命周期-看了这篇你就懂了

写这章博客不是为了要获得多少赞，主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚，不想后来的人再遇到这样的坑，做技术的要懂得分享，做人嘛，最重要的是开心。

官网说，“你暂时不用搞清楚这些...",我觉得你既然准备用vue做开发的，不搞懂搞透它，你以后会发现踩的坑终究还是有它引起的，等以后再来补坑，不如现在就拿下它。

以下主要从几个方面来讲：

1.vue的生命周期是什么

2.vue生命周期的在项目中的执行顺序

3.vue中内置的方法属性和vue生命周期的运行顺序（`methods`、`computed`、`data`、`watch`）

4.自己构造的方法与vue生命周期的运行顺序如`show`这些

5.总结

一、vue的生命周期是什么

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed
对应的中文就如其字面意思，英文不好的童鞋可以有道翻翻好了，这里要上图啦~~~

二、vue生命周期的在项目中的执行顺序

export default {
  data () {
    return {
      rendered: false
    }
  }
}

export default {
  beforeCeate(){
    console.log(this.rendered);  // undefined 
  }
}

export default {
  created() {
    console.log(this.$el);//undefined
    console.log(this.rendered);  // false
  }
}

export default {
  beforeMount() {
    console.log(this.$el)；//undefined
  }
}

export default {
  mounted() {
    console.log(this.$el);  
  }
}

export default {
  beforeDestroy(){
    console.log(this.$el);
    console.log(this.rendered); 
  }
}

export default {
  destroyed() {
    console.log(this.$el);
    console.log(this.rendered);
  }
}

三、vue中内置的方法属性和vue生命周期的运行顺序（`methods`、`computed`、`data`、`watch`、`props`)

从第一二点可知道data的初始化是在created时已经完成数据观测data observer，并且诸如methods、computed属性props等已经初始化；那问题来了，data props computed watch methods他们之间的生成顺序是什么呢？根据翻看vue源码可知：

props ->methods ->data -> computed -> watch; 懂了没

四、自己构造的方法与vue生命周期的运行顺序如`show`这些

往往我们在开发项目时都经常用到$refs 来直接访问子组件的方法，但是这样调用的时候可能会导致数据的延迟滞后的问题，则会出现bug。解决方法则是推荐采取异步回调的方法，然后传参进去，严格遵守vue的生命周期就可以解决推荐 es6 的promise。示例代码：

export default {
  methods: {
      handleAsync () {
          return new Promise(resolve=>{
              const res="somedata";
              resolve(res)
          })
       },
       async handleShow() {
              await this.handleAsync().then(res=>{
              this.$refs.child.show(res);
           })
        }
   }
}

五、总结

vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法，有兴趣的童鞋可以去深入了解一下。喜欢的童鞋点个赞啊哈哈，又来骗赞啦