面试题：Vue Composition API下复杂组件的内存管理技巧

Question

假设有一个使用Vue Composition API构建的复杂组件，其中涉及到大量的响应式数据、生命周期钩子以及外部资源（如定时器、WebSocket连接）。请详细说明在组件销毁时，如何正确管理内存以避免内存泄漏，包括如何清理响应式数据引用、取消定时器和关闭WebSocket连接等操作。

Answer 1

在Vue Composition API构建的组件销毁时，以下是正确管理内存避免内存泄漏的方法：

清理响应式数据引用

1. 使用ref和reactive创建的响应式数据：Vue会自动处理大部分常见场景下的响应式数据清理工作。当组件销毁时，Vue的响应式系统会自动切断与这些响应式数据的依赖关系，它们会在适当的时候被垃圾回收机制回收。但如果存在手动创建的复杂数据结构之间的引用，需要手动打破这些引用。

   import { ref, onBeforeUnmount } from 'vue';
   export default {
       setup() {
           const data = ref({});
           let externalObj;
           // 假设这里为externalObj赋值，且data.value对其有引用
           externalObj = { inner: data.value };
           onBeforeUnmount(() => {
               // 如果存在类似上述的引用，手动打破引用
               externalObj.inner = null;
           });
           return { data };
       }
   };
   

取消定时器

1. setTimeout和setInterval：使用onBeforeUnmount生命周期钩子函数，在组件销毁前清除定时器。

   import { onBeforeUnmount } from 'vue';
   export default {
       setup() {
           let timer;
           timer = setTimeout(() => {
               console.log('定时任务');
           }, 1000);
           onBeforeUnmount(() => {
               clearTimeout(timer);
           });
           let intervalTimer;
           intervalTimer = setInterval(() => {
               console.log('间隔任务');
           }, 2000);
           onBeforeUnmount(() => {
               clearInterval(intervalTimer);
           });
           return {};
       }
   };
   

关闭WebSocket连接

1. 创建和管理WebSocket：同样在onBeforeUnmount钩子中关闭WebSocket连接。

   import { onBeforeUnmount } from 'vue';
   export default {
       setup() {
           const socket = new WebSocket('ws://your-server-url');
           onBeforeUnmount(() => {
               socket.close();
           });
           return {};
       }
   };
   

通过上述方法，分别对响应式数据引用、定时器和WebSocket连接进行处理，可以有效地在组件销毁时管理内存，避免内存泄漏。