vue2中对mixin的理解

是什么?

混入是用来分发 Vue 组件中的可复用功能,混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。

当组件和混入对象含有同名选项时,以组件数据优先

理解:

1.组件调用了混入的对象,孤儿混入的选项会合并到当前组件中去

2.当混入的对象和组件含有同名选项时,以组件数据优先

3.当多个组件引入方法时,其中一个组价里面改变了混入中的某个属性值或者方法内部的操作时,其他组件不会受影响

vue中的mixin

mixin，中文： 混入。 它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

举例：

组件 A 和组件 B 中的 methods 有相同的函数，如何做优化？

mixin 本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在vue中我们可以局部混入和全局混入

局部混入

定义一个mixin对象,有组价options的data,methods属性

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    },
  },
}

组价通过mixin属性调用mixin对象

Vue.component('componentA', {
  mixins: [myMixin],
})

该组件在使用的时候,混入了mixin里面的方法,在自动执行create生命钩子,执行hello方法

全局混入

通过vue.mixin()进行全局混入

Vue.mixin({
  created: function () {
    console.log('全局混入')
  },
})

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

PS：全局混入常用于插件的编写

mixin的缺陷:

mixin最大的问题是:来源不清!

解决方式:v3的组合式api