面试题：Vue组件通信的优化与实践

避免多层嵌套组件间的props层层传递

使用Vuex：
- 思路：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它将应用的状态抽取到全局的store中，所有组件都可以从store中获取数据或提交mutation来修改状态，避免了props的层层传递。
- 示例：
  - 安装并引入Vuex：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    sharedData: 'default value'
  },
  mutations: {
    updateSharedData(state, newData) {
      state.sharedData = newData;
    }
  }
});

export default store;

 - 在组件中使用：

<template>
  <div>
    <p>{{sharedData}}</p>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
   ...mapState(['sharedData'])
  },
  methods: {
   ...mapMutations(['updateSharedData']),
    updateData() {
      this.updateSharedData('new value');
    }
  }
};
</script>

Provide/Inject：
- 思路：这是Vue的内置选项，provide选项允许我们指定我们想要提供给后代组件的数据/方法，inject选项允许后代组件直接使用这些数据/方法，而不需要通过props层层传递。
- 示例：
  - 祖先组件：

<template>
  <div>
    <child - component></child - component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      sharedData: 'default value',
      updateSharedData: () => {
        // 这里可以根据需求更新数据
      }
    };
  }
};
</script>

 - 后代组件：

<template>
  <div>
    <p>{{sharedData}}</p>
    <button @click="updateSharedData">Update Data</button>
  </div>
</template>

<script>
export default {
  inject: ['sharedData', 'updateSharedData']
};
</script>

更好地管理事件总线的使用以防止内存泄漏

事件总线实例化与销毁：
- 思路：创建一个单独的事件总线实例，在组件的beforeDestroy钩子函数中移除所有监听的事件，防止事件在组件销毁后仍然存在，导致内存泄漏。
- 示例：
  - 创建事件总线：

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

 - 在组件中使用：

<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  created() {
    eventBus.$on('custom - event', this.handleEvent);
  },
  methods: {
    sendEvent() {
      eventBus.$emit('custom - event', 'data to pass');
    },
    handleEvent(data) {
      console.log('Received data:', data);
    }
  },
  beforeDestroy() {
    eventBus.$off('custom - event', this.handleEvent);
  }
};
</script>

结合Vue的Composition API优化组件通信架构

使用ref和reactive：
- 思路：Composition API中的ref和reactive可以创建响应式数据，通过将共享数据定义在一个独立的函数中，并返回这些响应式数据和操作函数，实现逻辑的复用和更好的组件通信。
- 示例：

<template>
  <div>
    <p>{{sharedData.value}}</p>
    <button @click="updateSharedData">Update Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';

const useSharedData = () => {
  const sharedData = ref('default value');
  const updateSharedData = () => {
    sharedData.value = 'new value';
  };
  return {
    sharedData,
    updateSharedData
  };
};

export default {
  setup() {
    const { sharedData, updateSharedData } = useSharedData();
    return {
      sharedData,
      updateSharedData
    };
  }
};
</script>

Provide/Inject与Composition API结合：
- 思路：在setup函数中使用provide，在后代组件的setup函数中使用inject，可以更简洁地实现跨组件通信。
- 示例：
  - 祖先组件：

<template>
  <div>
    <child - component></child - component>
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const sharedData = 'default value';
    provide('sharedData', sharedData);
    return {};
  }
};
</script>

 - 后代组件：

<template>
  <div>
    <p>{{sharedData}}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const sharedData = inject('sharedData');
    return {
      sharedData
    };
  }
};
</script>

星途面试题库

面试题：Vue组件通信的优化与实践

知识考点

面试题答案

避免多层嵌套组件间的props层层传递

更好地管理事件总线的使用以防止内存泄漏

结合Vue的Composition API优化组件通信架构