如何在Vue 中管理 Mixins（搞懂这两点就足够了）

做者：Matt
译者：前端小智
来源：medium

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

当咱们的Vue项目功能愈来愈多时，若是有相似的组件，可能会发现本身一次又一次地复制和粘贴相同的数据、方法和 watch。固然，咱们能够将全部这些单独的文件编写为一个单独的组件，并使用 prop 来尝试自定义它们，可是使用这么多 props 很容易形成混乱且难懂。为了不这个问题，大多数人只是继续添加剧复的代码，尽管本身感受应该有更好的解决方案。

值得庆幸的是，Vue 引入mixin来解决这类的老是，mixin是在不一样组件之间共享可重用代码的最简单方法之一。Mixin 对象可使用任何组件选项如 data、mounted、created、update等，当组件使用 Mixin 时，Mixin 对象中的全部信息都将混合到组件中。而后，组件将有权访问mixin中的全部选项，就像在组件自己中声明的那样。接着，咱们经过示例来帮助加深一下映像：

// mixin.js file
export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log('这里由 mixin 中 create 方法打印！')
   },
   methods: {
      displayMessage: function () {
         console.log(‘这里由 mixin 方法里打印！’)
      }
   }
}

// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "这里由 mixin 中 create 方法打印！"
// => {msg: ‘Hello World’}
// => "这里由 mixin 方法里打印！"

正如咱们所看到的，在使用mixin以后，该组件包含mixin中的全部数据，而且能够经过使用this来访问mxin中的数据和方法。咱们还可使用变量而不是单独的文件来定义mixin。 坦白地说，这是咱们须要了解的大多数关于mixin的知识，可是我认为了解某些用例和特殊状况颇有用。

若是发生命名冲突该怎么办？

当mixin中的数据、方法或任何组件选项与组件中的选项具备相同的名称时，可能会发生组件与其mixin之间的命名冲突。若是发生这种状况，则组件自己的属性将优先。例如，若是在组件和mixin中都有一个title数据变量。title将返回组件中定义的值，以下所示：

// mixin.js file
export default {
   data () {
      title: ‘Mixin’
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"

总结

通常来讲，对于Vue 的 mixin，咱们还有不少要了解，，可是上面这些知识在开发中通常足够用了。若是你想了解更高级的主题，好比Vue中的全局mixin和自定义合并设置，能够在 Vue文档中找到这些信息。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://levelup.gitconnected....

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。