【vue】生命周期函数

本文主要是介绍【vue】生命周期函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

组件在其生命周期中的特定时候，会执行的函数

别忘了导入
如：import { ref, onMounted, onUpdated } from 'vue';

生命周期函数

• 挂载阶段
  • onBeforeMount：组件挂载到DOM之前调用
  • onMount：组件挂载成功后调用
• 更新阶段
  • onBeforeUpdate：组件更新完成前调用
  • onUpdated：组件更新完成后调用
• 卸载阶段
  • onBeforeUnmount：组件从DOM中被销毁前调用
  • onUnmounted：组件从DOM中被销毁后调用
• 错误处理
  • onErrorCaptured：捕获到组件中的错误时调用

程序

<template>count：{{ count }}<button @click="count++">count++</button>
</template><script setup>
import { ref, onMounted, onUpdated } from 'vue';const count = ref(0);
//组件成功挂载到DOM后执行
onMounted(() => {console.log('mounted');
});
//组件更新时执行
onUpdated(() => {console.log('updated');
})
</script><style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

这篇关于【vue】生命周期函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---