面试题：Vue侦听器与跨组件通信替代方案的实践应用

使用Vue侦听器和事件总线实现

事件总线（Event Bus）：

创建一个事件总线实例，通常在main.js中：

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

在商品列表组件中，当商品数量改变时，通过事件总线触发一个事件：

<template>
  <div>
    <input type="number" v-model="product.quantity" @input="updateQuantity">
  </div>
</template>
<script>
import { eventBus } from '@/main';
export default {
  data() {
    return {
      product: {
        quantity: 1,
        price: 10
      }
    };
  },
  methods: {
    updateQuantity() {
      eventBus.$emit('quantityChanged', this.product);
    }
  }
};
</script>

在购物车组件中，监听事件总线的quantityChanged事件，更新购物车总价：

<template>
  <div>
    <p>购物车总价: {{ totalPrice }}</p>
  </div>
</template>
<script>
import { eventBus } from '@/main';
export default {
  data() {
    return {
      totalPrice: 0
    };
  },
  created() {
    eventBus.$on('quantityChanged', product => {
      this.totalPrice += product.price * product.quantity;
    });
  }
};
</script>

Vue侦听器：

在商品列表组件中，可以使用侦听器监听商品数量的变化：

<template>
  <div>
    <input type="number" v-model="product.quantity">
  </div>
</template>
<script>
export default {
  data() {
    return {
      product: {
        quantity: 1,
        price: 10
      }
    };
  },
  watch: {
    'product.quantity': {
      immediate: true,
      handler(newVal) {
        // 这里可以做一些本地的逻辑，比如验证数量是否合法等
        // 然后触发事件总线事件
        this.$emit('quantityChanged', this.product);
      }
    }
  }
};
</script>

优势

事件总线：
- 灵活性高：不同层级的组件之间都可以方便地通信，不需要通过props层层传递数据，适合非父子组件间的通信。
- 解耦性好：组件之间的依赖关系降低，商品列表组件不需要知道购物车组件的具体实现，只需要触发事件即可。
Vue侦听器：
- 方便监听数据变化：可以方便地在数据变化时执行一些逻辑，比如验证数据的合法性，或者在数据变化后执行一些副作用操作，然后再触发跨组件通信的事件。

可能遇到的问题

事件总线：
- 命名冲突：如果项目中有大量组件通过事件总线通信，可能会出现事件名称冲突的问题，导致错误的事件被触发。
- 难以调试：由于事件总线是全局的，当出现问题时，很难确定是哪个组件触发了事件，排查问题比较困难。
Vue侦听器：
- 性能问题：如果侦听器过多或者处理逻辑复杂，可能会影响性能，特别是在频繁触发数据变化的场景下。另外，如果侦听器设置不当，可能会导致死循环，比如在侦听器中修改被监听的数据，又触发侦听器。

星途面试题库

面试题：Vue侦听器与跨组件通信替代方案的实践应用

知识考点

面试题答案

使用Vue侦听器和事件总线实现

优势

可能遇到的问题