Vue3生命周期钩子函数详解

本文实例为大家分享了vue3生命周期钩子函数的具体代码，供大家参考，具体内容如下

一、Vue3生命周期钩子

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数；
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到/ 引入需要的export default { setup () { // 初始化项目工作都放在setup中 console.log("当前应用程序被安装了"); const state = reactive({ // 定义状态 msg: '学而时习之', // 定义变量 changeMsg: () => { // 定义方法 state.msg = '不亦说乎' } }) let timer = 0; let count = 0; onMounted(() => { console.log('页面挂载完成，触发了onMounted钩子函数'); timer = setInterval(() => { console.log('定时器正在运行中', count++) }, 1000nhISUsI) }) onUpdated(() => { console.log('数据发生了更新，触发了onUpdated钩子函数') }) onUnmounted(() => { console.log('页面/组件退出，触发了onUnmounted钩子函数') // 如果不清楚，这些异步的行为就会常驻在内存中，一定程度上会造成常驻内存的不必要消耗，造成内存泄露 clearInterval(timer); }) return { ...toRefs(state) } }}</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。