qiankun中RangeError: Maximum call stack size exceeded

在QianKun（乾坤）框架中，`RangeError: Maximum call stack size exceeded`是一个常见的JavaScript运行时错误，表示函数的递归调用栈已达到其最大深度。这意味着函数正在不断地调用自身，并且没有退出条件，导致创建了过多的函数上下文，超过了浏览器的默认限制。

这种错误通常发生在循环中有无限递归，或者是处理复杂嵌套结构时，某个回调函数无意间陷入无限循环。例如：

function infiniteLoop() {
  infiniteLoop(); // 没有停止条件
}

infiniteLoop(); // 抛出 RangeError

要解决这个问题，你需要找到并修复导致无限递归的原因，通常包括：

1. 检查所有的递归调用，确保它们都有明确的终止条件。
2. 确保你的回调函数不会无休止地自我调用，特别是在处理数组或其他数据结构时。
3. 如果是组件树渲染导致的问题，可能是虚拟DOM更新的逻辑需要优化，避免不必要的多次渲染。

相关问题

qiankun ::v-deep 不生效

qiankun是一个微前端框架，它使用了Vue的::v-deep选择器来解决全局样式干扰的问题。但是有时候在使用qiankun时，::v-deep选择器可能会不生效。这可能是由于以下几个原因导致的：

1. 预处理器不支持::v-deep选择器：有些预处理器（如Sass）无法正确解析::v-deep选择器，这时可以尝试使用/deep/选择器来代替::v-deep选择器。

2. 样式作用域问题：在使用qiankun时，子应用的样式可能会受到父应用的样式影响。这时可以尝试在样式中使用/deep/选择器或者给子应用的根元素添加一个唯一的class来限定样式的作用域。

3. 样式加载顺序问题：如果样式表的加载顺序不正确，可能会导致::v-deep选择器不生效。确保样式表在使用::v-deep选择器的组件之前加载。

4. qiankun版本问题：某些版本的qiankun可能存在::v-deep选择器不生效的问题。可以尝试升级到最新版本或者查看qiankun的文档和社区是否有相关的解决方案。

总结起来，如果qiankun的::v-deep选择器不生效，可以尝试使用/deep/选择器代替，检查样式作用域和加载顺序，以及升级qiankun版本等方法来解决问题。

qiankun中使用vuex进行父子通信

在qiankun中，主应用和子应用之间可以通过vuex进行状态管理和通信。以下是使用vuex在主应用和子应用之间进行通信的步骤：

1. 在主应用中，创建一个共享状态的vuex store，并将其传递给子应用。

// 主应用中的store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: '',
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    },
  },
});

export default store;

// 主应用中的main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

// 注册微应用
registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/sub-app',
    props: {
      globalStore: store,
    },
  },
]);

2. 在子应用中，接收主应用传递过来的store，并在子应用中使用store中的状态和mutations。

// 子应用中的main.js
import Vue from 'vue';
import App from './App.vue';

let instance = null;
function render(props = {}) {
  const { globalStore } = props;
  new Vue({
    render: h => h(App, { props: { globalStore } }),
  }).$mount('#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  instance = render(props);
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

// 子应用中的App.vue
<template>
  <div id="app">
    <h1>Sub App</h1>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    globalStore: Object,
  },
  computed: {
    message() {
      return this.globalStore.state.message;
    },
  },
  methods: {
    updateMessage() {
      this.globalStore.commit('setMessage', 'Hello from sub app!');
    },
  },
};
</script>

在子应用中，通过props接收主应用传递过来的store，并在computed中使用store中的状态，在methods中使用store中的mutations。这样，主应用和子应用就可以共享vuex store中的状态，并通过mutations进行通信了。