Vue.mixin：实现组件间强大的复用功能

2024-01-19 12:01:10

Vue.mixin是一个使用恰当时会是一个非常优秀的API，滥用或者使用不当时，将会是一场噩梦，这也是官方不推荐在应用项目中使用它的原因。
想要深入了解Vue.mixin的原理及使用，就需要从Vue是如何解析mixins开始。
在Vue的初始化时，它会首先解析mixins，并将mixins中的选项合并到组件的选项中。
合并策略如下：

data ：对象合并。
methods ：对象合并。
computed ：对象合并。
watch ：数组合并。
directives ：数组合并。
filters ：数组合并。
components ：对象合并。
props ：对象合并，子组件的prop必须在父组件的props中定义。
inject ：数组合并。
provide ：数组合并。
model ：对象合并。
lifecycle hooks ：函数合并，在合并时会依次执行每个函数。

需要注意的是，如果mixins中定义的选项与组件中的选项冲突，则组件中的选项将覆盖mixins中的选项。
同时，也可以通过mixins的provide和inject选项来实现组件之间的数据共享。

示例代码：

Vue.mixin({
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }
})

const MyComponent = Vue.extend({
  template: '<button @click="sayHello">Say hello</button>'
})

const app = new Vue({
  components: {
    MyComponent
  }
})

在上面的示例中，我们定义了一个mixin，并在MyComponent组件中使用它。
这样，MyComponent组件就可以使用mixin中定义的数据和方法。

优点：