面试题：Vue中onMounted与onUnmounted在Composition API里的基础应用

Question

请描述在Vue的Composition API中，onMounted和onUnmounted钩子函数分别在什么时候被调用？并举例说明如何使用它们来操作DOM元素，比如在组件挂载时给一个id为 'app - box' 的div添加一个类名，在组件卸载时移除该类名。

Answer 1

1. onMounted钩子函数：
   • 调用时机：在组件挂载到DOM后调用，此时组件的模板已经被渲染到DOM中，可以安全地访问和操作DOM元素。
   • 示例：

<template>
  <div id="app-box"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const appBox = document.getElementById('app - box');
  if (appBox) {
    appBox.classList.add('active');
  }
});
</script>

<style scoped>
.active {
  background - color: lightblue;
}
</style>

2. onUnmounted钩子函数：
   • 调用时机：在组件从DOM中卸载后调用，即当组件被销毁时触发。
   • 示例：

<template>
  <div id="app-box"></div>
</template>

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

onMounted(() => {
  const appBox = document.getElementById('app - box');
  if (appBox) {
    appBox.classList.add('active');
  }
});

onUnmounted(() => {
  const appBox = document.getElementById('app - box');
  if (appBox) {
    appBox.classList.remove('active');
  }
});
</script>

<style scoped>
.active {
  background - color: lightblue;
}
</style>