浅谈vue的生命周期

1、什么是vue的生命周期？

vue的组件每个都是独立的，并且都有一个属于它的生命周期，从一个组件创建、挂载、更新、销毁，这就是一个组件所谓的生命周期。具体的生命周期方法有:

export default{
  beforeCreate(){ // 创建前 },
  created(){ // 创建后 }
  beforeMount(){ // 挂载前 }
  mounted(){ // 挂载后 }
  beforeUpdate(){ // 更新前 }
  updated(){ // 更新后 }
  beforeDestroy(){ // 销毁前 }
  destroyed(){ // 销毁后 }
}

2、vue生命周期在组件加载时执行顺序

组件生命周期执行顺序是按照创建->挂载->更新->销毁的顺序执行的。

3、vue执行生命周期时需要注意的地方

beforeCreat，当执行beforeCreat生命周期函数时，vue实例还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数内调用数据的话，后台会显示undefined。

created，执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，此时，会将data中的属性和methods的方法添加到vue的实例身上，同时会将data中所有的属性添加一个getter/setter方法。如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

beforeMount，这时，vue已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。

mounted，创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$refs来访问到真实的DOM结构。ref类似与id一样 值必须是唯一的，访问的时候我们可以使用this.$refs.属性

当数据发生变化，比如触发了点击事件改动数据

1. beforeUpdate：内存中的数据已经改变，页面上的还没更
2. updated：页面上数据和内存中的一致

销毁阶段

1. beforeDestroy：出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除
2. destroyed：组件销毁完毕，data，methods，指令之类的不可用。