面试题：Vue Composition API中onMounted与onUnmounted的复杂场景应用

Question

假设你正在开发一个Vue应用，其中有一个地图组件使用了第三方地图库（如百度地图或高德地图）。在使用Composition API时，如何利用onMounted和onUnmounted钩子函数来正确初始化和销毁地图实例，并且处理可能出现的内存泄漏问题？请给出大致的代码结构和关键步骤。

Answer 1

1. 引入必要的依赖和钩子函数

<template>
  <div id="map-container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
// 假设使用高德地图，引入高德地图JS API
import AMap from 'AMap'; 

2. 定义地图实例变量并在onMounted中初始化地图

let map = null;
onMounted(() => {
  map = new AMap.Map('map-container', {
    zoom: 13,
    center: [116.397428, 39.90923]
  });
});

3. 在onUnmounted中销毁地图实例以避免内存泄漏

onUnmounted(() => {
  if (map) {
    map.destroy();
    map = null;
  }
});
</script>

4. 样式设置

#map-container {
  width: 100%;
  height: 400px;
}

关键步骤总结：

1. 在setup中定义地图实例变量，初始值设为null。
2. 使用onMounted钩子函数，在组件挂载后创建地图实例，传入地图容器的id和初始化配置。
3. 使用onUnmounted钩子函数，在组件卸载时检查地图实例是否存在，如果存在则调用地图实例的destroy方法销毁地图，并将地图实例变量设为null，以释放内存，防止内存泄漏。