更好的使用VueMixins

微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Mixin组件在项目中经常被用来复用一些业务逻辑，但是它们有一些不确定的细微差别，在项目开发中越来越明显。我偶尔也会遇到这样的情况，它们使代码库的重构或新功能的开发变得困难。在介绍我的方法之前，我想描述一下使用mixin的优缺点。优点扩展了代码重用的DRY原则。我们可以在不同的组件中重用相同的业务逻辑。我们可以将mixin视为全局mixin，与所有组件共享上下文。缺点使用mixin的组件逻辑不透明。在可重写上下文中，我们一定要注意不要重写某些Mixin的同名方法、getter或数据；缺点不是避免混入的关键原因，但我们应该意识到它们。建议采用基于这些技术的方法来减少缺点的影响。在方法、getter、值和道具名称的开头使用前缀。它展示了mixin相关的功能。使用这个技巧可以让我们轻松地分离组件props和mixinprops。例如：$_<(prop|method|value)>exportdefault{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};},方法：{$impressionsMixin_getObserverOptions(){//...},$impressionsMixin_setImpressionObserver(){//...},$impressionsMixin_resetImpressionObserver(){//...},$impressionsMixin_logImpression(){//...}}};在父组中这样使用：我不喜欢在全局混合中使用前缀通常，这些方法和值的名称是明确的，并且它们的功能在项目的其他部分没有重复，因此不需要为它们添加前缀。exportdefault{config(){//...},user(){//...},isMobile(){//...},isTablet(){//...},isDesktop(){//...}};这种方法的优点：Mixins的方法或属性可以很容易的IDE自动补全使用，使用前缀可以防止组件方法不小心覆盖mixin的方法和属性，对于大型项目的开发人员来说，组件代码透明易读，总之Mixin是一个很好用的工具，但是它会让我们的项目特别是在大型项目中projects变得更加复杂，死板和不透明。使用这种方法是一个很好的实践，可以明确mixin的含义，避免am带来的一些bug歧义。无法实时获知代码部署后可能出现的BUG。之后为了解决这些BUG，我花了很多时间在日志调试上。顺便推荐一个好用的BUG监控工具，Fundebug。原文：https://medium.com/@artem.hol...交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者.本文已收录在GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的面试站点、资料和我的系列文章。作者：knaagar译者：前端小智来源：medium有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。GitHubhttps://github.com/qq449245884/xiaozhi已经收录，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Mixin组件在项目中经常被用来复用一些业务逻辑，但是它们有一些不确定的细微差别，在项目开发中越来越明显。我偶尔也会遇到这样的情况，它们使代码库的重构或新功能的开发变得困难。在介绍我的方法之前，我想描述一下使用mixin的优缺点。优点扩展了代码重用的DRY原则。我们可以在不同的组件中重用相同的业务逻辑。我们可以将mixin视为全局mixin，与所有组件共享上下文。缺点使用mixin的组件逻辑不透明。在可重写上下文中，我们一定要注意不要重写某些Mixin的同名方法、getter或数据；缺点不是避免混入的关键原因，但我们应该意识到它们。建议采用基于这些技术的方法来减少缺点的影响。在方法、getter、值和道具名称的开头使用前缀。它展示了mixin相关的功能。使用这个技巧可以让我们轻松地分离组件props和mixinprops。例如：$_<(prop|method|value)>exportdefault{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};},方法：{$impressionsMixin_getObserverOptions(){//...},$impressionsMixin_setImpressionObserver(){//...},$impressionsMixin_resetImpressionObserver(){//...},$impressionsMixin_logImpression(){//...}}};在父组中这样使用：我不喜欢在全局混合中使用前缀通常，这些方法和值的名称是明确的，并且它们的功能在项目的其他部分没有重复，因此不需要为它们添加前缀。exportdefault{config(){//...},user(){//...},isMobile(){//...},isTablet(){//...},isDesktop(){//...}};这种方法的优点：Mixins的方法或属性可以很容易的IDE自动补全使用，使用前缀可以防止组件方法不小心覆盖mixin的方法和属性，对于大型项目的开发人员来说，组件代码透明易读，总之Mixin是一个很好用的工具，但是它会让我们的项目特别是在大型项目中项目变得更加复杂，不灵活，不透明。使用这种方法是一个很好的实践，可以使mixin的含义更加明确，避免一些bug歧义造成的。编辑中可能出现的BUG无法实时获知，事后为了解决这些BUG，我花了很多时间进行日志调试。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://medium.com/@artem.hol...沟通有梦，有干货微信搜索【大千世界】关注这位早期还在洗碗的洗碗智慧早晨。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我采访一线厂商系列文章。