在 Vue 中，可以使用 mixin 函数来封装和复用公共的逻辑。Mixin 是一种可重复使用的对象或函数，包含任何组件中都可以使用的选项，例如 data、methods 和生命周期钩子等。
要创建一个 mixin , 可以编写一个普通的 JavaScript 对象，其中包含需要混入多个组件中的选项。然后通过 mixins 选项将 mixin 混入到组件中。例如：
// 定义一个 mixin 对象
const myMixin = {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
// 将 mixin 对象混入到多个组件中
Vue.component('component-a', {
mixins: [myMixin],
// ...
})
Vue.component('component-b', {
mixins: [myMixin],
// ...
})在这个例子中，我们定义了一个名为 myMixin 的 mixin 对象，它包含一个 data 方法和一个 increment 方法。然后我们使用 mixins 选项将该 mixin 对象混入到两个不同的组件中。
当 Vue 创建组件时，它会将 mixin 对象中的选项合并到组件选项中，从而形成最终的选项。如果组件本身已经声明同样的选项，则组件选项优先：即组件选项将覆盖 mixin 对象中的相同选项。
总之，使用 mixin 函数可以方便地封装和复用公共逻辑，从而提高代码的可维护性和复用率。