面试题：Vue中onMounted与onUnmounted生命周期钩子的基础使用

Question

请简述在Vue Composition API中，onMounted和onUnmounted生命周期钩子的作用，并给出一个简单示例代码，展示如何在一个组件中使用这两个钩子来操作DOM元素，比如在组件挂载时给页面添加一个自定义的标题，在组件卸载时移除这个标题。

Answer 1

onMounted和onUnmounted钩子的作用

1. onMounted：该钩子函数在组件挂载到DOM后被调用。这意味着组件的模板已经被渲染，并且可以安全地操作DOM元素。常用于需要在组件渲染完成后立即执行的操作，如初始化第三方插件、获取DOM元素引用等。
2. onUnmounted：该钩子函数在组件从DOM中卸载后被调用。常用于清理在组件挂载期间创建的副作用，如解绑事件监听器、取消定时器等，以避免内存泄漏。

示例代码

<template>
  <div>
    <p>这是一个示例组件</p>
  </div>
</template>

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

onMounted(() => {
  const title = document.createElement('h1');
  title.textContent = '自定义标题';
  document.body.appendChild(title);
});

onUnmounted(() => {
  const title = document.querySelector('h1');
  if (title) {
    title.remove();
  }
});
</script>

上述代码中，在组件挂载时（onMounted），创建一个h1标题元素并添加到页面body中；在组件卸载时（onUnmounted），找到并移除之前添加的h1标题元素。