javascript

2023-06-28 05:59| 来源: 网络整理| 查看: 265

作者：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和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。

【本文地址】

公司简介

联系我们