【vue3系列】vue3之生命周期(带图)

Vue3之生命周期

主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)：

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

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

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

import {onMounted} from 'vue'

在这里，beforecreate和created被setup方法本身所替代，我们在在setup中将会访问到9个生命周期：

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

• onMounted：组件挂载时调用

• onBeforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。

• onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用

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

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

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

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

• <script>
  import { onMounted } from 'vue'
   export default {
   	setup(){
   		onMounted(()=>{
   			console.log('生命周期----onMounted')
   		})
   	}
   }
  </script>
  

  在组合API中，使用setup()方法替换了beforeCreate和created，那么在这两个生命周期中的方法将放在setup中执行

  beforeMount()和onBeforeMount()

  在组件DOM实际渲染之前调用，此时根元素还不存在，在选项API中，可使用this.$el来 访问；在组合API中，想访问的话就必须在根元素上使用ref。

  //选项API
  beforeMount(){
  	console.log('beforeMount',this.$el)
  }
  
  //组合API
  <template>
  	<div ref="root">
  		Hello~
  	</div>
  </template>
   import {ref,onBeforeMount} from 'vue'
   export default{
   	setup(){
   		const root = ref(null)
   		onBeforeMount(()=>{
   			console.log('onBeforeMount',root.value)
   		})
   		return {
   		root
   		}
   	},
   	  beforeMount() {
        console.log('beforeMount',this.$el)
      }
   }
  

  mounted()和onMounted()

  在组件的第一次选然后调用，此时元素可用，允许直接DOM访问。

  import { ref, onMounted } from 'vue'
   
  
   export default {
     // 组合 API
     setup() {    
   
       const root = ref(null)
       
       onMounted(() => {
         console.log(root.value)
       })
  
       return {
         root
       }
     },
     // 选项 API 
     mounted() {
       console.log(this.$el)
     }
   } 
  

  beforeUpdate()和onBeforeUpdate()

  数据更新时调用，发生在虚拟DOM打补丁之前。

  beforeUpdate对于跟踪对组件的编辑次数，甚至跟踪创建撤销功能的操作很有用。

  updated()和onUpdated()

  DOM更新后，updated的方法就会调用

  beforeUnmount()和onBeforeUnmounted()

  在卸载组件实例之前调用

  //选项API
  export default{
  mounted(){
  	console.log('mounted')
  },
  beforeUnmount(){
  	console.log('unmount')
  }
  }
  
  //组合API
  import { onMounted,onBeforeUnmount } from 'vue'
  export default {
  	setup(){
  		onMounted(()=>{
  			console.log('mount')
  		})
  		onBeforeUnmount(()=>{
  			console.log('unmount')
  		})
  	}
  }
  

  unmounted()和onUnmounted()

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

  import { onUnmouted } from 'vue'
  
  export default {
  	//组合API
  	setup(){
  		onUnmounted(()=>{
  			console.log('unmounted')
  		})
  	},
  	//选项API
  	unmounted(){
  		console.log('unmounted')
  	}
  }
  

  actived()和onActivated()

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

  deactivated()和onDeactivated()

  被keep-alive缓存的组件停用时调用。

vue3还提供了两个可用于调试目的的钩子

• onRenderTracked
• onRenderTriggered

这两个事件都带有一个debugger event，该事件会告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

export default {
    onRenderTriggered(e) {
       debugger
       // 检测什么依赖造成了组件的重新渲染
    }
}