Vue.js 中的 mixin 可以用来做什么？

mixin 是 Vue.js 中的一个全局混入对象,可以用来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任何组件选项,它将被合并到最终的选项中。

mixin 的作用是:

1. 可以重用一些公共的功能函数或逻辑。
2. 将组件拆分为可重用模块,提高组件的开发效率。
3. 增强组件的功能,让组件具有一定的预设功能。

使用方式:

js
var mixin = {
  methods: { ... },
  created: function () { ... },
  // ...
}

var Component = {
  mixins: [mixin],
  // ...  
}

示例:

js
const helloMixin = {
  methods: {
    sayHello() {
      console.log('hello!')
    }
  }  
}

const worldMixin = {
  methods: {
    sayWorld() {
      console.log('world!')
    }
  }  
}

const myComponent = {
  mixins: [helloMixin, worldMixin],
  created() {
    this.sayHello()   // Prints "hello!"
    this.sayWorld()   // Prints "world!"
  }  
}

在这个例子中,myComponent 通过 mixins 获取了 helloMixin 和 worldMixin 的方法,所以能够调用 sayHello 和 sayWorld。

mixin 的注意点:

1. mixin 和组件中重名的选项以组件的优先。
2. mixin 可以包含其他 mixin,形成混入链。
3. 避免 mixin 引起的循环依赖。
4. mixin 中的钩子函数的合并策略是将数组的形式组合起来,按照 mixin 应用的顺序执行。