以更好的方式使用 Vue Mixins

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() {

// ...

}

}

};

在父组件中这样使用：

v-for="item in items"

:key="item.id"

:item="item"

textAlign="left"

:$impressionsMixin_page="page"

:$impressionsMixin_itemId="item.id"

:$impressionsMixin_listingId="listingId"

/>

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

export default {

config() {

// ...

},

user() {

// ...

},

isMobile() {

// ...

},

isTablet() {

// ...

},

isDesktop() {

// ...

}

};

该方式的优点：

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

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

作者：knaagar 译者：前端小智

来源：medium 原文：https://medium.com/@artem.holinka/use-vue-js-mixins-in-a-better-way-11e4ff774763。

云南idc服务商