如何管理 VueJS Mixins

摘要

伯衡君这几天正学习Web三大主流框架之一的Vue.js，颇有一些感悟，确实是非常容易入门，易学，而且功能上也是十分强大，所以往后会陆续推出一些文章来说一下伯衡君了解到的内容和技巧心得，本篇来说一下如何管理Mixins……

开篇寄语

伯衡君这几天正学习Web三大主流框架之一的Vue.js，颇有一些感悟，确实是非常容易入门，易学，而且功能上也是十分强大，所以往后会陆续推出一些文章来说一下伯衡君了解到的内容和技巧心得，本篇来说一下如何管理Mixins。

内容详情

当你的 Vue 项目主见添加代码后，如果你有类似的组件，你可能会发现自己一遍又一遍地复制和粘贴相同的data、method和watch。当然——您可以将所有这些单独的文件编写为单个组件，并使用 props 来自定义它们。然而，使用这么多道具很容易让人感到困惑和混乱。为了避免这项艰巨的任务，大多数人只是继续添加重复的代码。最好的 Vue 开发人员会知道有一个更好的解决方案——VueJS Mixins。

值得庆幸的是，VueJS提供了Mixin——这是在不同组件之间共享可重用代码的最简单方法之一。 Mixin 对象可以使用任何组件选项——data, mounted, created, update等等——当一个组件使用 mixin 时，mixin 对象中的所有信息都将混合到组件中。然后，组件可以访问 mixin 中的所有选项，就像您在组件本身中声明它一样。

举个例子后，这会更有意义。

伯衡君创建了一个名为mixin.js的文件，如下代码：

 export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log(‘Printing from the Mixin’)
   },
   methods: {
      displayMessage: function () {
         console.log(‘Now printing from a mixin function’)
      }
   }
}

然后在main.js直接就可以引用，如下代码：

import mixin from './mixin.js'
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})

如您所见，使用 mixin 后，组件包含 mixin 中的所有数据，并通过使用 this 访问它。

您还可以使用变量而不是单独的文件来定义 mixin。老实说，这就是你需要了解的关于 mixin 的大部分内容。

如果出现命名冲突会怎样？

当 mixin 中存在与组件中的选项同名的数据、方法或任何组件选项时，组件与其 mixin 之间可能会发生命名冲突。如果发生这种情况，组件本身中的属性将优先。例如，如果组件和 mixin 中都有一个 title 数据变量 - this.title 将返回组件中定义的值。在代码中，这看起来像：

export default {
   data () {
      title: ‘Mixin’
   }
}

上面是mixin.js，下面是main.js

import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// 输出结果为 "Component"

如您所见，来自内部组件的数据优先于默认的 mixin 值。

以上是旧版的Vuejs表示，在3.0版本中，则是如下表示：

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})

const vm = app.mount('#mixins-basic')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

区别倒不是很大。