vue的生命周期

1.vue的生命周期

一般来讲，生命周期就是我们从开始创建vue实例到销毁的一个过程，这一过程就叫做生命周期，这就好比我们的人生一样从出生到结束的一个过程。

生命周期函数：在某一种条件成立的时刻系统会去调用的vue中设定的函数。

2.生命周期

• 又名：生命周期回调函数、生命周期函数、生命周期钩子；
• 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数；
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的；
• 生命周期函数中的this指向是vm或组件实例对象；

 注： 钩子：c语言中有一类系统回调的函数然后执行业务。

3.为什么要用生命周期函数？

• 把整个运行期间的业务区分的很明显；
• 能够更好的帮助我们把产品的业务逻辑实现了；
• 更有利于我们维护产品和修改需求；
• 能够让我们写出更高质量的产品的代码；

 4.有哪些生命周期？

 Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期。

生命周期	具体解释
beforeCreate	组件实例被创建之初
created	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destoryed	组件实例销毁之后

 <1>beforeCreate(){}

用于预加载网络资源，并不进行页面渲染，将资源缓存到本地，当页面渲染需要请求该资源时直接在本地获取;

<2>created(){}

请求首屏数据;

<3>beforeMount(){}

用于渲染前的操作;

<4>mounted(){}

请求首屏数据,请求时页面已经出来了，vm已经挂载到页面了;

<5>beforeUpdate(){}

用于重新渲染之前的操作;

<6>updated(){}

用于重新渲染完成时的操作;

<7>beforeDestroy(){}

vm对象销毁之前触发的钩子,this还在,可以做最后的操作，例如保存用户的行为配置文件:播放器的进度等等;

<8>destroyed(){}

vm对象销毁之前触发的钩子，this已经不存在，无法操作this。往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部;

<9>activated(){}

被 keep-alive 缓存的组件激活时调用;

<10>deactivated(){}

子可以看做是beforeDestory和destoryed的替代;

<script>
export default {  
  // 在实例初始化之后，数据观测和事件配置之前被调用
  beforeCreate(){
    console.log('beforeCreate----创建前');
  },
  // 实例已经创建完成之后被调用
  created(){
    console.log('created----创建之后');
  },
  // 页面准备挂载时候被调用,此时相关的渲染函数首次被调用
  beforeMount(){
    console.log('beforeMount----挂载开始');
  },
  // 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
  mounted(){
    console.log('mounted----挂载完成');
  },
  // 数据更新之前被调用
  beforeUpdate(){
    console.log('beforeUpdate----更新之前被调用');
  },
  //数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated(){
    console.log('updated----更新后');
  },
  // 我们将要销毁整个页面或实例时调用
  beforeDestroy(){
    console.log('beforeDestroy----销毁前');
  },
  // 我们的整个页面或实例被销毁之后调用
  destroyed(){
    console.log('destroyed----销毁后');
  },
  // 被 keep-alive 缓存的组件激活时调用
  activated(){
    console.log('activated');
  },
  //  deactivated配合keep-alive来使用
  //  使用了keep-alive就不会调用beforeDestory和destoryed钩子了
  //  因为组件没有被销毁，而是被缓存起来了
  //  所以deactivated钩子可以看做是beforeDestory和destoryed的替代
  deactivated(){
    console.log('deactivated');
  }
}
</script>

5.总结 

• beforeCreate created beforeMount mounted beforeDestroy destoryed这些钩子都只执行一次;
• beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用;
• beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例；
• 只有beforeUpdate updated运行时不能做网络请求；
• 我们一般把网络请求放在created或者mounted中，具体的根具业务需求来；
• 放在created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势 放在mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI；