共计 3729 个字符，预计需要花费 10 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
