Vue.js 中的 mixins 是什么？它们有什么作用？

Mixins 是 Vue.js 中的一种分发 Vue 组件中可复用功能的非常灵活的方式。
一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

混入的作用是:

1. 复用代码。可以提取出可复用的方法或计算属性到混入对象中。
2. 处理公共逻辑。可以在混入对象中包涵全局逻辑而无需重复在每个组件中定义。

使用 mixins 的步骤:

1. 定义混入对象:

js
const myMixin = {
  methods: {
    foo() { ... }
  },
  created() { ... },
  computed: {
    bar() { ... } 
  } 
}

2. 在组件中使用 mixins 选项混入:

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

3. 组件的选项将与混入对象的选项“混合”。
   示例:

js 
const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    }
  } 
}

var Component = {
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar') 
    }
  },
  mounted() {
    this.foo()   // 调用混入的方法
    this.bar()   
  }  
} 

Mixins 可以让我们在不同的组件之间复用代码,提高开发效率。理解 Mixins 的机制,可以让我们在 Vue 框架下更加灵活高效地设计组件结构。