面试题：Vue中如何利用mixins和provide/inject实现高内聚低耦合组件

Question

mixins和provide/inject是Vue中两种不同的代码复用和组件通信方式。请说明在复杂的组件结构中，如何利用mixins来提高组件内聚性，同时借助provide/inject降低组件间的耦合度？请举例说明具体的应用场景和实现方法。

Answer 1

利用 mixins 提高组件内聚性

1. 概念：Mixins 是一种分发 Vue 组件中可复用功能的方式。通过将多个组件中共有的逻辑提取到 mixin 中，然后在组件中引入该 mixin，使得组件的逻辑更加集中，提高内聚性。
2. 应用场景：例如多个组件都需要进行数据的格式化处理，如日期格式化、金额格式化等。
3. 实现方法：

   // 创建一个 mixin
   const formatMixin = {
     methods: {
       formatDate(date) {
         // 日期格式化逻辑
         return new Intl.DateTimeFormat('zh-CN').format(new Date(date));
       },
       formatMoney(amount) {
         // 金额格式化逻辑
         return amount.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' });
       }
     }
   };
   
   // 在组件中使用 mixin
   export default {
     mixins: [formatMixin],
     data() {
       return {
         date: '2023-10-01',
         money: 10000
       };
     },
     template: `
       <div>
         <p>格式化后的日期: {{ formatDate(date) }}</p>
         <p>格式化后的金额: {{ formatMoney(money) }}</p>
       </div>
     `
   };
   

借助 provide/inject 降低组件间耦合度

1. 概念：Provide 和 Inject 是 Vue 提供的一种祖先组件向子孙组件传递数据的方式，不需要在组件链中逐级传递数据，从而降低组件间的耦合度。
2. 应用场景：在一个多层嵌套的组件结构中，顶层组件需要向深层的子孙组件传递一些配置信息，如主题颜色、语言等，而不需要中间层组件关心这些数据。
3. 实现方法：

   // 祖先组件
   export default {
     provide() {
       return {
         themeColor: 'blue'
       };
     },
     template: `
       <div>
         <child-component></child-component>
       </div>
     `
   };
   
   // 子孙组件
   export default {
     inject: ['themeColor'],
     template: `
       <div :style="{ color: themeColor }">
         我使用了祖先组件提供的主题颜色: {{ themeColor }}
       </div>
     `
   };
   

综合应用场景

在一个电商应用中，可能有多个商品展示组件需要进行价格格式化（使用 mixins 提高内聚性），同时应用的主题设置（如颜色、字体等）需要传递给各个层级的组件，包括商品展示组件（使用 provide/inject 降低耦合度）。

// 格式化 mixin
const priceFormatMixin = {
  methods: {
    formatPrice(price) {
      return price.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' });
    }
  }
};

// 祖先组件（如 App.vue）
export default {
  provide() {
    return {
      appTheme: {
        color: 'green',
        fontSize: '14px'
      }
    };
  },
  template: `
    <div>
      <product - list></product - list>
    </div>
  `
};

// 商品列表组件
export default {
  mixins: [priceFormatMixin],
  inject: ['appTheme'],
  data() {
    return {
      products: [
        { name: '商品1', price: 100 },
        { name: '商品2', price: 200 }
      ]
    };
  },
  template: `
    <div :style="{ color: appTheme.color, fontSize: appTheme.fontSize }">
      <ul>
        <li v - for="product in products" :key="product.name">
          {{ product.name }}: {{ formatPrice(product.price) }}
        </li>
      </ul>
    </div>
  `
};

通过这种方式，既利用 mixins 提高了组件内部逻辑的内聚性，又借助 provide/inject 降低了组件间的耦合度，使得复杂组件结构的代码更易于维护和扩展。