以更好的方式使用 Vue Mixins

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

Mixin 组件在项目中经常被用来重用一些业务逻辑，但它们有一些不确定的细微差别，这在项目开发中越来越明显。我偶尔也会遇到这种情况，它们会给代码库的重构或新功能的开发带来困难。

在介绍我的方法之前，我想先介绍一下使用mixins的优点和缺点。

优点

• 扩展了代码重用的DRY原则。我们可以在不同的组件中重复使用相同的业务逻辑。
• 我们可以把 mixin 作为一个全局性的 mixin，与所有的组件共享上下文。

缺点

• 使用mixins的组件的逻辑不透明。
• 可重写的上下文，我们必须注意不要因为相同的名称覆盖一些Mixin的方法，getter或数据;

缺点并不是避免使用 mixins 的一个关键原因，但我们应该了解它们。建议使用基于这些技巧的方式来减少缺点所带来的影响。

在 method、getter、value和 props 名字开头使用前缀。它展示了 mixin 相关的功能。使用这个技巧可以让我们轻松地分离组件 props 和 mixin props。例如：$<mixinName>_<(prop|method|value)>

export default {
  props: {
    $impressionsMixin_page: {
      type: Number,
      required: true
    },
    $impressionsMixin_listingId: {
      type: Number,
      required: true
    },
    $impressionsMixin_itemId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      $impressionsMixin_observer: null,
      $impressionsMixin_timeout: null,
      $impressionsMixin_eventObject: null
    };
  },
  methods: {
    $impressionsMixin_getObserverOptions() {
      // ...
    },
    $impressionsMixin_setImpressionObserver() {
      // ...
    },
    $impressionsMixin_resetImpressionObserver() {
      // ...
    },
    $impressionsMixin_logImpression() {
      // ...
    }
  }
};

在父组件中这样使用：

<template>
  <div id="app">
    <ListingItem
      v-for="item in items"
      :key="item.id"
      :item="item"
      textAlign="left"
      :$impressionsMixin_page="page"
      :$impressionsMixin_itemId="item.id"
      :$impressionsMixin_listingId="listingId"
    />
  </div>
</template>

我不喜欢在全局mixin中使用前缀。通常，这些方法和值的名称是明确的，并且它们的功能不会在项目的其他部分重复，所以不需要为它们添加前缀。

export default {
  config() {
    // ...
  },
  user() {
    // ...
  },
  isMobile() {
    // ...
  },
  isTablet() {
    // ...
  },
  isDesktop() {
    // ...
  }
};

该方式的优点：

• Mixins的方法或属性可以方便地被IDE自动完成使用。
• 使用前缀可以避免组件的方法意外覆盖mixin方法和属性。
• 大项目中的开发者对组件代码的透明和方便的阅读。

总结

Mixin是一个有用的工具，但它会使我们的项目特别是在大项目中变得更加复杂、不灵活和不透明。使用这种方法是一种很好的实践，可以更加明确mixin含义并避免一些由于不明确导致的bug。

---

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://medium.com/@artem.hol...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

作者：knaagar
译者：前端小智
来源：medium

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

Mixin 组件在项目中经常被用来重用一些业务逻辑，但它们有一些不确定的细微差别，这在项目开发中越来越明显。我偶尔也会遇到这种情况，它们会给代码库的重构或新功能的开发带来困难。

在介绍我的方法之前，我想先介绍一下使用mixins的优点和缺点。

优点

• 扩展了代码重用的DRY原则。我们可以在不同的组件中重复使用相同的业务逻辑。
• 我们可以把 mixin 作为一个全局性的 mixin，与所有的组件共享上下文。

缺点

• 使用mixins的组件的逻辑不透明。
• 可重写的上下文，我们必须注意不要因为相同的名称覆盖一些Mixin的方法，getter或数据;

缺点并不是避免使用 mixins 的一个关键原因，但我们应该了解它们。建议使用基于这些技巧的方式来减少缺点所带来的影响。

在 method、getter、value和 props 名字开头使用前缀。它展示了 mixin 相关的功能。使用这个技巧可以让我们轻松地分离组件 props 和 mixin props。例如：$<mixinName>_<(prop|method|value)>

export default {
  props: {
    $impressionsMixin_page: {
      type: Number,
      required: true
    },
    $impressionsMixin_listingId: {
      type: Number,
      required: true
    },
    $impressionsMixin_itemId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      $impressionsMixin_observer: null,
      $impressionsMixin_timeout: null,
      $impressionsMixin_eventObject: null
    };
  },
  methods: {
    $impressionsMixin_getObserverOptions() {
      // ...
    },
    $impressionsMixin_setImpressionObserver() {
      // ...
    },
    $impressionsMixin_resetImpressionObserver() {
      // ...
    },
    $impressionsMixin_logImpression() {
      // ...
    }
  }
};

在父组件中这样使用：

<template>
  <div id="app">
    <ListingItem
      v-for="item in items"
      :key="item.id"
      :item="item"
      textAlign="left"
      :$impressionsMixin_page="page"
      :$impressionsMixin_itemId="item.id"
      :$impressionsMixin_listingId="listingId"
    />
  </div>
</template>

我不喜欢在全局mixin中使用前缀。通常，这些方法和值的名称是明确的，并且它们的功能不会在项目的其他部分重复，所以不需要为它们添加前缀。

export default {
  config() {
    // ...
  },
  user() {
    // ...
  },
  isMobile() {
    // ...
  },
  isTablet() {
    // ...
  },
  isDesktop() {
    // ...
  }
};

该方式的优点：

• Mixins的方法或属性可以方便地被IDE自动完成使用。
• 使用前缀可以避免组件的方法意外覆盖mixin方法和属性。
• 大项目中的开发者对组件代码的透明和方便的阅读。

总结

Mixin是一个有用的工具，但它会使我们的项目特别是在大项目中变得更加复杂、不灵活和不透明。使用这种方法是一种很好的实践，可以更加明确mixin含义并避免一些由于不明确导致的bug。

---

编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://medium.com/@artem.hol...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。