面试题：Vue Composition API中onMounted与onUnmounted的性能优化与原理探究

性能瓶颈分析

内存泄漏：
- 原因：在onMounted中注册的一些事件监听器、定时器等，如果在onUnmounted中没有正确清理，就会导致内存泄漏。例如，在onMounted中为window对象添加了一个事件监听器，但在onUnmounted中忘记移除，那么即使组件被销毁，这个事件监听器依然存在，持续占用内存。
- 原理：JavaScript的垃圾回收机制（如标记 - 清除算法）依赖于对象是否有可达的引用。如果一个对象不再被应用程序中的任何其他对象引用，垃圾回收器会在适当的时候回收其占用的内存。而未清理的事件监听器等会保持对相关对象的引用，使得这些对象无法被垃圾回收，从而导致内存泄漏。
重复渲染：
- 原因：如果在onMounted中进行了一些复杂的数据计算或DOM操作，且这些操作没有进行适当的缓存或防抖处理，当组件由于某些原因（如父组件重新渲染触发子组件重新渲染）再次挂载时，这些操作会重复执行，导致不必要的性能开销。
- 原理：Vue的响应式系统依赖于数据的变化来触发重新渲染。当组件重新挂载时，onMounted钩子中的代码会再次执行，如果其中的操作会导致数据变化（即使是不必要的变化），就可能触发额外的重新渲染。

优化措施

针对内存泄漏：
- 确保清理操作：在onUnmounted中务必清理在onMounted中注册的所有外部资源，如移除事件监听器、清除定时器等。例如：
```
import { onMounted, onUnmounted } from 'vue';
export default {
    setup() {
        const handleClick = () => {
            console.log('Clicked');
        };
        onMounted(() => {
            window.addEventListener('click', handleClick);
        });
        onUnmounted(() => {
            window.removeEventListener('click', handleClick);
        });
    }
};
```
- 使用弱引用：对于一些需要临时引用但又不希望阻止垃圾回收的对象，可以考虑使用WeakMap或WeakSet。例如，如果在onMounted中创建了一些临时对象用于缓存数据，可以使用WeakMap来存储这些对象，这样当这些对象不再有其他强引用时，垃圾回收器可以回收它们。

针对重复渲染：

缓存计算结果：如果onMounted中有复杂的计算，将计算结果进行缓存。例如：

import { onMounted } from 'vue';
export default {
    setup() {
        let cachedResult;
        onMounted(() => {
            if (!cachedResult) {
                cachedResult = complexCalculation();
            }
            // 使用cachedResult进行后续操作
        });
        const complexCalculation = () => {
            // 复杂计算逻辑
            return result;
        };
    }
};

防抖和节流：对于一些频繁触发的操作（如窗口大小变化等），使用防抖或节流函数。可以使用lodash库中的debounce或throttle函数。例如：

import { onMounted } from 'vue';
import { debounce } from 'lodash';
export default {
    setup() {
        const handleResize = () => {
            // 处理窗口大小变化的逻辑
        };
        const debouncedHandleResize = debounce(handleResize, 200);
        onMounted(() => {
            window.addEventListener('resize', debouncedHandleResize);
        });
        onUnmounted(() => {
            window.removeEventListener('resize', debouncedHandleResize);
            debouncedHandleResize.cancel();
        });
    }
};

Vue Options API与Composition API钩子对比

优势：

代码组织更灵活：在Composition API中，onMounted和onUnmounted可以在setup函数内根据逻辑需求进行分组。例如，相关的生命周期钩子和数据逻辑可以写在一起，而在Options API中，mounted和beforeDestroy钩子是分散在组件选项中的不同位置，对于大型组件，代码可能变得难以维护。
更好的逻辑复用：可以将onMounted和onUnmounted相关的逻辑封装成可复用的函数。例如，创建一个用于处理窗口大小变化的自定义Hook，在不同组件中复用。

import { onMounted, onUnmounted } from 'vue';
const useWindowResize = () => {
    const handleResize = () => {
        // 处理窗口大小变化的逻辑
    };
    onMounted(() => {
        window.addEventListener('resize', handleResize);
    });
    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });
    return {
        // 可以返回一些数据或方法供组件使用
    };
};
export default {
    setup() {
        const { } = useWindowResize();
        return {
            // 返回数据和方法
        };
    }
};

劣势：
- 学习成本：对于熟悉Options API的开发者，Composition API的onMounted和onUnmounted这种函数式的写法可能需要一定时间适应。Options API的钩子写法更加直观，直接写在组件选项中。
- 类型推断可能更复杂：在使用TypeScript时，Composition API中onMounted和onUnmounted的类型推断可能相对复杂一些。Options API中的钩子由于是在组件选项中定义，类型推断相对简单直接。

星途面试题库

面试题：Vue Composition API中onMounted与onUnmounted的性能优化与原理探究

知识考点

面试题答案

性能瓶颈分析

优化措施

Vue Options API与Composition API钩子对比