vue的生命周期:

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

生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

生命周期详细图解

生命周期都有哪些呢？

beforeCreate( 创建前 )
created ( 创建后）
beforeMount（挂载开始之前被调用）
mounted（挂载完成）
beforeUpdate（数据更新之前被调用）
updated(数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用)
beforeDestroy（我们将要销毁整个页面或实例时调用）
destroyed（我们的整个页面或实例被销毁之后调用）
activated（被 keep-alive 缓存的组件激活时调用）
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>

977dcc28041e4d9da315ca405a44ffb4_tplv-k3u1fbpfcp-watermark.png

小总结

1.vue当中，有哪两个钩子会执行多次？

beforeUpdate和updated

只要改了data中的数据，就会触发beforeUpdate,和updated这两个钩子执行

2.vue当中，有哪些钩子只会执行1次？

beforeCreate、created和beforeMount,、mounted

vue生命周期（详细）

vue的生命周期:

生命周期

生命周期详细图解

生命周期都有哪些呢？

小总结