vue3-生命周期

生命周期

vue 组件实例都有自己的一个生命周期
从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件
生命周期简单说就是 vue 实例从创建到销毁的过程

生命周期钩子

在各个周期运行时，会执行钩子函数，让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子

官方示意图：

生命周期钩子函数

钩子函数	说明
beforeCreate	在实例初始化之后调用
created	实例已经创建完成之后调用
beforeMount	在挂载开始之前被调用
mounted	在组件挂载完成后执行
beforeUpdate	在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updated	在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

<script lang="ts" setup>
import {ref,reactive,onBeforeMount, // 在组件挂载之前执行的函数onMounted,onBeforeUpdate, // 在组件修改之前执行的函数onUpdated,onBeforeUnmount, // 在组件卸载之前执行的函数onUnmounted
} from 'vue'// setup 替代了 beforeCreate   setup// reactive 创建响应式对象
let data = reactive({// 定义响应式数据count: 0
})const clickMe = () => {data.count++alert('hi')
}console.log('1-开始创建组件-----setup()')onBeforeMount(() => {console.log('2-组件挂载到页面之前执行-----onBeforeMount()')
})onMounted(() => {console.log('3-组件挂载到页面之后执行-----onMounted()')
})
onBeforeUpdate(() => {console.log('4-组件更新之前-----onBeforeUpdate()')
})onUpdated(() => {console.log('5-组件更新之后-----onUpdated()')
})onBeforeUnmount(() => {console.log('6-组件卸载之前-----onBeforeUnmount()')
})
onUnmounted(() => {console.log('7-组件卸载之后-----onUnmounted()')
})
</script><template><div class="container"><p>数字为{{ data.count }}</p><button @click="clickMe">修改数据</button></div>
</template><style lang="scss" scoped>
.container {
}
</style>

VUE3 与 VUE2 生命周期的对比

setup 方式

  vue2            vue3beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

通过这样对比，