要知道Vue3中的生命周期如何使用,先要明白Vue2中的生命周期如何使用
Vue2生命周期
Vue 2中的生命周期钩子函数分为8个阶段,分别是:
- beforeCreate: 在实例被创建之前执行,此时数据观测和初始化都未开始。
- created: 在实例创建完成后执行,此时已完成数据观测并且所有的属性和方法都已经建立完成。
- beforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
- mounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
- beforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
- updated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
- beforeDestroy: 在实例销毁之前调用,此时实例仍然完全可用。
- destroyed: 在实例销毁之后调用,此时实例所有的属性和方法都已经被删除,DOM元素也已经被销毁。
需要注意的是,Vue 2中的生命周期钩子函数只是在组件生命周期的不同阶段被调用,开发者可以在这些钩子函数中执行自己的逻辑。同时,Vue 2中的生命周期钩子函数并不是必须的,开发者可以选择只使用部分钩子函数或者不使用钩子函数。但是,钩子函数的执行顺序是固定的,不能随意更改。
Vue3 生命周期
Vue 3中的生命周期钩子函数相对于Vue 2有了一些变化,以下是Vue 3中的生命周期钩子函数:
- beforeCreate: 在实例被创建之前执行,此时数据观测和初始化都未开始。
- created: 在实例创建完成后执行,此时已完成数据观测并且所有的属性和方法都已经建立完成。
- beforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
- mounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
- beforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
- updated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
- beforeUnmount: 在卸载之前被调用,此时实例仍然完全可用。
- unmounted: 在卸载之后被调用,此时实例已被完全卸载,所有的事件监听器和子组件实例都已经被删除。
需要注意的是,Vue 3中不再支持
beforeDestroy
和destroyed
钩子函数,取而代之的是beforeUnmount
和unmounted
。此外,Vue 3中的生命周期钩子函数采用了更加直观的命名方式,使得开发者更容易理解和使用。
注意!!!:Vue3的生命周期钩子函数,和setup()函数是平级的,只有销毁阶段有所不同;Vue3的组合式生命周期,是写在setup()函数里面的
Vue3的组合式生命周期
注意!!:Vue3的组合式生命周期每一个阶段都要比Vue3的生命周期先执行
在Vue 3中,组合式API是一种新的API风格,可以让我们更好地组织和重用组件逻辑。与Vue 2的选项式API不同,组合式API没有像created
、mounted
、beforeUpdate
等生命周期钩子函数,而是采用了一种新的组合式生命周期的方式。 组合式生命周期是通过onXXX
函数来实现的,其中XXX
代表不同的阶段,以下是Vue 3中的组合式生命周期:
- onBeforeMount: 在挂载之前被调用,此时模板编译已完成,但尚未将编译得到的内容替换到HTML文档中。
- onMounted: 在挂载之后被调用,此时实例已完成挂载并且可以访问到DOM元素。
- onBeforeUpdate: 在更新之前被调用,此时数据已更新但尚未重新渲染DOM。
- onUpdated: 在更新之后被调用,此时数据已更新且DOM已重新渲染。
- onBeforeUnmount: 在卸载之前被调用,此时实例仍然完全可用。
- onUnmounted: 在卸载之后被调用,此时实例已被完全卸载,所有的事件监听器和子组件实例都已经被删除。
在组合式API中,我们可以按照自己的需要组织和重用组件逻辑,并且可以根据不同的生命周期阶段来执行相应的逻辑。与选项式API相比,组合式API可以让我们更好地理解和控制组件的生命周期,提高了代码的可维护性和可读性。
Vue3的组合式生命周期钩子函数,写在setup()函数里面
Vue3中的组合式API,可以多次使用,执行顺序从上往下
<script setup>
onMounted(() => {
console.log('第一个执行的 onMounted 钩子函数')
})
onMounted(() => {
console.log('第二个执行的 onMounted 钩子函数')
})
</script>