作者：Matt译者：前端小智来源：Medium已收录本站，更多往期好评文章已归类，以及我的很多文档和教程资料也都整理出来了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。随着我们的Vue项目变得越来越功能化，如果我们有类似的组件，我们可能会发现自己一遍又一遍地复制和粘贴相同的数据、方法和手表。当然，我们可以将所有这些单独的文件写成一个组件，并使用props来尝试和自定义它们，但是使用这么多props很容易让人感到困惑和难以理解。为了避免这个问题，尽管感觉应该有更好的解决方案，但大多数人只是不断添加重复代码。值得庆幸的是，Vue引入了mixins来解决这些问题，而mixins是在不同组件之间共享可重用代码的最简单方法之一。一个Mixin对象可以使用任何组件选项，如data、mounted、created、update等。当组件使用Mixin时，Mixin对象中的所有信息都会被混合到组件中。然后组件将有权访问组件本身声明的mixin中的所有选项。接下来我们用一个例子来帮助加深形象：//mixin.jsfileexportdefault{data(){msg:'HelloWorld'},created:function(){console.log('这是create方法打印出来的inthemixin!')},methods:{displayMessage:function(){console.log('Thisisprintedbythemixinmethod!')}}}//------------------------------------//主要的。jsfileimportmixinfrom'./mixin.js'newVue({mixins:[mixin],created:function(){console.log(this.$data)this.displayMessage()}})//=>"这里是mixin中创建的方法Print!"//=>{msg:'HelloWorld'}//=>"这里是通过mixin方法打印的！我们可以看到，使用mixin后，组件中包含了mixin中的所有数据，使用this可以访问mxin中的数据和方法。我们还可以使用变量而不是单独的文件来定义混合。坦率地说，这是我们需要了解的关于mixin的大部分内容，但我认为了解一些用例和特殊情况很有用。命名冲突怎么办？当mixin中的数据、方法或任何组件选项与组件中的选项具有相同的名称时，组件与其mixin之间可能会发生命名冲突。如果发生这种情况，组件本身的属性将优先。例如，如果组件和mixin中都有一个title数据变量。title将像这样返回组件中定义的值：//mixin.jsfileexportdefault{data(){title:'Mixin'}}//-----------------------------------------------------------//main.jsfileimportmixinfrom'./mixin.js'exportdefault{mixins:[mixin],data(){title:'Component'},created:function(){console.log(this.title)}}//=>"Component"总结总的来说，对于Vue的mixin，我们还有很多需要了解的地方，但是上面的知识对于开发来说一般已经足够了。如果您想了解更高级的主题，例如Vue中的全局混合和自定义合并设置，您可以在Vue文档中找到这些信息。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://levelup.gitconnected....每周更新交流文章。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。这篇文章在GitHub上https://github.com/qq449245884/xiaozhi已经收录，整理了很多我的文档。欢迎明星和完美。面试可以参考考点。另外，关注公众号，后台会回复福利，看到福利就知道了。
