vue3的生命周期钩子

挖掘机挖不动

2023-11-23 164 阅读1分钟

*关于vue3的常用生命周期钩子*

1. `onMounted`

onMounted在组件的挂载过程（即组件的模板被渲染为真实的DOM并插入到DOM树中）完成后被调用。这是进行DOM操作或执行依赖于DOM的操作的理想时机。

import { ref, onMounted } from 'vue';

const message = ref('Hello');

onMounted(() => {
  console.log('Component is mounted!');
  // 可以执行依赖于DOM的操作
});
</script>

<template>
  <div>{{ message }}</div>
</template>

2. `onUpdated`

onUpdated在组件的响应式依赖发生改变，并且重新渲染和修补虚拟DOM之后被调用。这用于在每次组件更新后执行操作。

import { ref, onUpdated } from 'vue';

const count = ref(0);

onUpdated(() => {
  console.log('Component updated!');
  // 可以执行每次组件更新后的操作
});
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

3. `onUnmounted`

onUnmounted在组件卸载之后被调用。这是清理资源（如定时器、事件侦听器等）的理想时机，以避免内存泄漏。

<script setup>
import { ref, onUnmounted } from 'vue';

const intervalId = ref(null);

onUnmounted(() => {
  clearInterval(intervalId.value);
  console.log('Component unmounted!');
  // 清理资源
});
</script>