关于前端:以更好的方式使用-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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在介绍我的办法之前，我想先介绍一下应用 mixins 的长处和毛病。

扩大了代码重用的 DRY 准则。咱们能够在不同的组件中重复使用雷同的业务逻辑。
咱们能够把 mixin 作为一个全局性的 mixin，与所有的组件共享上下文。

应用 mixins 的组件的逻辑不通明。
可重写的上下文，咱们必须留神不要因为雷同的名称笼罩一些 Mixin 的办法，getter 或数据;

毛病并不是防止应用 mixins 的一个要害起因，但咱们应该理解它们。倡议应用基于这些技巧的形式来缩小毛病所带来的影响。

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>

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

该形式的长处：

Mixins 的办法或属性能够不便地被 IDE 主动实现应用。
应用前缀能够防止组件的办法意外笼罩 mixin 办法和属性。
大我的项目中的开发者对组件代码的通明和不便的浏览。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

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

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

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

关于前端:以更好的方式使用-Vue-Mixins

长处

毛病

总结

交换

长处

毛病

总结

交换