面试题：Vue默认插槽在跨组件通信及动态加载场景下的深度应用

数据传递思路

事件总线（Event Bus）：

创建一个全局的事件总线实例，在最深层组件触发自定义事件，将需要传递的数据作为参数传递。例如在 Vue 中：

// 创建事件总线
const eventBus = new Vue();

// 最深层组件触发事件
eventBus.$emit('deep - to - outer', data);

// 最外层组件监听事件
eventBus.$on('deep - to - outer', (data) => {
    // 处理数据
});

Vuex 或 Redux 状态管理（以 Vuex 为例）：
- 最深层组件将数据提交到 Vuex 的 mutation 中。
```
// 最深层组件
this.$store.commit('SET_DATA_FROM_DEEP', data);
```
- 最外层组件通过计算属性获取 Vuex 中的数据。
```
computed: {
    dataFromDeep() {
        return this.$store.state.dataFromDeep;
    }
}
```

动态加载组件思路

使用 <component> 标签结合 is 属性：

在插槽位置使用 <component> 标签，根据不同的业务逻辑动态绑定 is 属性。例如：

<template>
    <div>
        <slot>
            <component :is="dynamicComponent"></component>
        </slot>
    </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
    data() {
        return {
            dynamicComponent: ComponentA
        };
    },
    methods: {
        changeComponent() {
            this.dynamicComponent = ComponentB;
        }
    }
};
</script>

异步组件加载：

使用 () => import('组件路径') 的方式异步加载组件，这样可以实现按需加载，提高性能。

<template>
    <div>
        <slot>
            <component :is="asyncDynamicComponent"></component>
        </slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            asyncDynamicComponent: () => import('./ComponentA.vue')
        };
    },
    methods: {
        changeAsyncComponent() {
            this.asyncDynamicComponent = () => import('./ComponentB.vue');
        }
    }
};
</script>

性能优化

缓存动态加载组件：

使用 keep - alive 标签包裹动态加载的组件，这样可以缓存组件状态，避免重复渲染。例如：

<template>
    <div>
        <slot>
            <keep - alive>
                <component :is="dynamicComponent"></component>
            </keep - alive>
        </slot>
    </div>
</template>

减少不必要的重新渲染：
- 在动态加载组件时，确保只在必要的数据发生变化时才重新渲染。在 Vue 中，可以使用 watch 或 computed 来监听数据变化，并控制组件的渲染。例如，如果动态组件依赖某个数据 dynamicData：
```
watch: {
    dynamicData() {
        // 只有 dynamicData 变化时才重新加载组件
        this.changeComponent();
    }
}
```

可能遇到的坑及解决方案

事件总线内存泄漏：
- 坑：如果在组件销毁时没有解绑事件总线的监听，会导致内存泄漏。
- 解决方案：在组件销毁时手动解绑事件。例如在 Vue 组件中：
```
beforeDestroy() {
    eventBus.$off('deep - to - outer');
}
```
动态组件传递数据问题：
- 坑：动态加载的组件可能无法正确接收父组件传递的数据，或者数据传递不及时。
- 解决方案：确保动态组件的 props 定义正确，并且在数据变化时及时更新。可以通过 watch 监听传递给动态组件的数据，必要时强制更新组件。例如：
```
watch: {
    dataForDynamicComponent() {
        this.$forceUpdate();
    }
}
```
性能问题在大量动态加载时：
- 坑：当有大量动态加载组件时，即使做了缓存，性能仍可能受到影响。
- 解决方案：进一步优化，如使用虚拟列表技术（如果是列表形式的动态组件），或者对组件进行更细粒度的拆分和懒加载，确保只有当前可见的组件被加载和渲染。

星途面试题库

面试题：Vue默认插槽在跨组件通信及动态加载场景下的深度应用

知识考点

面试题答案

数据传递思路

动态加载组件思路

性能优化

可能遇到的坑及解决方案