面试题：Vue Teleport与微前端架构结合的深度剖析

样式隔离挑战

挑战：
- 子应用通过Teleport将弹出层渲染到主应用DOM节点下，可能导致子应用样式影响主应用其他部分，或者主应用样式影响子应用弹出层样式。例如，主应用全局设置了字体样式，可能会改变子应用弹出层内文本的字体，破坏子应用原有的样式设计。
解决方案：
- 使用CSS Modules：在子应用中使用CSS Modules，它会为每个样式类生成唯一的哈希值，避免样式冲突。例如，在Vue组件中：

<template>
  <div class="my - component">
    <button @click="showPopup">Show Popup</button>
    <teleport to="#main - app - target">
      <div class="popup">Popup Content</div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  }
};
</script>

<style module>
.my - component {
  /* 组件自身样式 */
}
.popup {
  /* 弹出层样式 */
}
</style>

Shadow DOM：虽然Vue本身对Shadow DOM支持有限，但可以结合一些polyfill库来实现。Shadow DOM提供了更严格的样式隔离，子应用的样式被封装在Shadow DOM内部，不会影响外部。例如，可以使用@webcomponents/shadycss等库来模拟Shadow DOM的样式隔离效果。

事件冒泡挑战

挑战：
- 当子应用弹出层内的元素触发事件时，事件冒泡可能会导致主应用捕获到该事件，与主应用的事件处理逻辑产生冲突。比如子应用弹出层内的按钮点击事件冒泡到主应用，可能触发主应用中与该按钮无关的其他逻辑。
解决方案：
- 在子应用中阻止事件冒泡：在子应用的事件处理函数中使用$event.stopPropagation()来阻止事件向上冒泡。例如：

<template>
  <teleport to="#main - app - target">
    <div class="popup">
      <button @click="handleClick($event)">Click Me</button>
    </div>
  </teleport>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      event.stopPropagation();
      // 按钮点击后的其他逻辑
    }
  }
};
</script>

使用事件委托：在主应用中，通过判断事件源来决定是否处理事件。例如，在主应用的根元素上添加事件监听器：

<template>
  <div id="app" @click="handleGlobalClick">
    <!-- 主应用内容 -->
    <div id="main - app - target"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleGlobalClick(event) {
      if (!(event.target.closest('.popup'))) {
        // 处理主应用自身的点击事件，不处理子应用弹出层内的点击事件
      }
    }
  }
};
</script>

数据传递挑战

挑战：
- 子应用通过Teleport将弹出层渲染到主应用DOM节点下，可能会使数据传递变得复杂。子应用弹出层可能需要与主应用共享数据或者向主应用传递操作结果，传统的父子组件通信方式可能不再适用。
解决方案：
- 使用Vuex或Pinia：如果主应用和子应用都使用Vue，可以通过共享的状态管理库（如Vuex或Pinia）来实现数据传递。例如，在主应用和子应用中都引入Vuex，并配置共享的store：

// main.js (主应用)
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// sub - app.js (子应用)
import Vue from 'vue';
import Vuex from 'vuex';
import SubApp from './SubApp.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  // 这里可以直接引用主应用的store配置，实现共享
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    }
  }
});

new Vue({
  store,
  render: h => h(SubApp)
}).$mount('#sub - app');

然后子应用弹出层可以通过this.$store.commit('setSharedData', data)向主应用传递数据。

自定义事件总线：创建一个全局的事件总线来实现跨应用数据传递。例如：

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

// 子应用弹出层
import { eventBus } from './eventBus';

export default {
  methods: {
    sendDataToMainApp() {
      const data = { message: 'Hello from sub - app popup' };
      eventBus.$emit('sub - app - data', data);
    }
  }
};

// 主应用
import { eventBus } from './eventBus';

export default {
  created() {
    eventBus.$on('sub - app - data', data => {
      // 处理子应用传递过来的数据
    });
  }
};

星途面试题库

面试题：Vue Teleport与微前端架构结合的深度剖析

知识考点

面试题答案

样式隔离挑战

事件冒泡挑战

数据传递挑战