面试题：深入理解Vue组件销毁机制及父子组件销毁顺序与资源清理

Vue组件销毁顺序

在Vue中，当一个具有多层父子嵌套关系的组件树进行销毁操作时，遵循先子后父的顺序。这是因为子组件的存在依赖于父组件，先销毁子组件可以确保不会有遗留的对已销毁父组件的引用，避免潜在的内存泄漏和错误。

不同顺序下的操作处理

子组件处理
- 数据状态清理：在beforeDestroy钩子函数中，可以清理组件内部定义的数据状态，例如将数据重置为初始值或直接删除相关数据。
- 事件解绑：移除组件内部添加的自定义事件监听器或DOM事件监听器。
- 外部资源释放：如果组件使用了外部资源，如定时器、WebSocket连接等，在beforeDestroy中进行释放。
父组件处理
- 数据状态清理：与子组件类似，在beforeDestroy钩子函数中清理与父组件相关的数据状态。
- 事件解绑：解绑父组件内部添加的事件监听器。
- 外部资源释放：释放父组件使用的外部资源。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Component Destroy</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <parent-component></parent-component>
</div>
<script>
    Vue.component('child-component', {
        template: `<div>Child Component</div>`,
        beforeDestroy() {
            console.log('Child component is about to be destroyed. Cleaning up...');
            // 假设这里有数据状态清理
            // this.someData = null;
            // 假设这里有事件解绑
            // window.removeEventListener('click', this.handleClick);
            // 假设这里有外部资源释放，如定时器
            // clearInterval(this.timer);
        }
    });

    Vue.component('parent-component', {
        template: `<div>
            <child-component></child-component>
            Parent Component
        </div>`,
        beforeDestroy() {
            console.log('Parent component is about to be destroyed. Cleaning up...');
            // 假设这里有数据状态清理
            // this.someParentData = null;
            // 假设这里有事件解绑
            // window.removeEventListener('scroll', this.handleScroll);
            // 假设这里有外部资源释放，如WebSocket连接
            // this.websocket.close();
        }
    });

    new Vue({
        el: '#app'
    });

    // 模拟销毁操作，例如通过一个按钮触发
    // setTimeout(() => {
    //     const vm = new Vue({
    //         el: '#app'
    //     });
    //     vm.$destroy();
    // }, 5000);
</script>
</body>
</html>

在上述代码中，当parent-component及其内部的child-component被销毁时，child-component的beforeDestroy钩子函数会先执行，然后是parent-component的beforeDestroy钩子函数。在这些钩子函数中，可以分别对数据状态清理、事件解绑和外部资源释放进行处理，以保证应用的稳定性和性能。

星途面试题库

面试题：深入理解Vue组件销毁机制及父子组件销毁顺序与资源清理

知识考点

面试题答案

Vue组件销毁顺序

不同顺序下的操作处理

代码示例