微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。