vue3 生命周期函数图

vue3 生命周期函数

在vue2中主要有8个钩子生命周期

• 创建 ---- 在组建创建时执行
• 挂载 ---- DOM被挂载时执行
• 更新 ---- 当响应数据被修改时执行
• 销毁 ---- 在元素被销毁之前立即执行

在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。

<script>
export default {
  data() {
    return {
      
    }
  },
  beforeCreate() {
    
  },
  created() {
    
  },
  beforeCreate() {
    
  },
  mounted() {
    
  },
  beforeUpdate() {
    
  },
  updated() {
    
  },
  beforeDestroy() {
    
  },
  destroyed() {
    
  },
  setup() {
    
  }
}
</script>

在vue3【composition API】中，我们需要引入生命周期钩子函数到项目中，然后才能在setup函数中使用。

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
	    console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
    	console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>

<script setup>
// 引入生命周期钩子
import { onMounted } from "vue";
onMounted(()=>{
  console.log(' DOM被挂载完成时执行');
});
</script>

<template>
  <div class="app">
    <h1>生命周期</h1>
  </div>
</template>

<style scoped lang='scss'>
  .app{
    width: 400px;
    height: 500px;
    background-color: blueviolet;
  }
</style>

在vue3中，beforecreate和created被setup方法本身所替代，在setup函数内部可以做vue2中的beforecreate和created任何操作

在setup中将会访问到的生命周期：

• onBeforeMount：在挂载之前被调用，渲染函数render首次被调用

• onMounted：组件挂载时调用

• onBeforeUpdate：数据已经完成更新页面刷新前调用，发生在虚拟DOM打补丁之前。

• onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用，页面已经刷新完成

• onBeforeUnmount：在卸载组件实例之前调用，此阶段的组件实例依旧是正常的。

• onUnmounted()：卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

• onActivated：被keep-alive缓存的组件激活时调用

• onDeactivated：被keep-alive缓存的组件停用时调用

• onErrorCaptured：当捕获一个来自子孙组件的错误时被调用，有三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串；此钩子会返回false来阻止该错误继续向上传播。

页面初始化时，直接触发的钩子函数：onBeforeMount、onMounted、onRenderTracked

数据发生改变后触的钩子函数：onBeforeUpdate、onUpdated、onRenderTracked、onRenderTriggered

组件被卸载时触发的钩子函数：onBeforeUnmount、onUnmounted()

Vue3.x新增生命周期onRenderTracked和onRenderTriggered

页面上绑定了响应式数据然后只要响应式数据做了取值操作就会触发onRenderTracked该钩子函数，包括初始化渲染时也会调用。

当虚拟DOM重新渲染被触发时调用，接收debugger event作为参数，此事件告诉是什么操作触发了重新渲染从而触发onRenderTriggered钩子函数。

这两个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用