【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