Vue中的mixin(混入)

1. 什么是mixins

Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

通俗的来说： 如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。

2. 混入的写法和使用

混入对象和组件对象基本是相同，都有data、method和一系列生命周期钩子函数。

// 1. 创建mixin.js并导出混入对象
export default {
  data() {
    return {
      str: 'mixin'
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  ....
  methods: {},
  ...
}

// Vue组件使用
<script>
// 2. 引入mixin.js
import mixin from '../mixin'
export default {
  // 3. 使用混入对象
  mixins: [mixin],
  mounted() {
    console.log(this.str);
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3. 混入的规则

1. 数据重复以组件数据为准

数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。

// mixin.js
data() {
  return {
    num: 1	
  }
}

// Vue组件
data() {
  return {
    num: 2	
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

上述代码中混入对象和Vue组件都定义了一个名为num的数据，在引入并使用混入后，num会以组件自身定义的为准，num的值为2。

2. 引用数据类型会进行深参差的递归合并

数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。

// mixin.js
data() {
  return {
    person: {
      a: 1
    }	
  }
}

// Vue组件
data() {
  return {
    person: {
      b: 2
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上述代码中混入对象和Vue组件都定义了一个名为person的对象，在引入并使用混入后，person对象进行了类似于Object.assign方法，person的值为{ a:1， b： 2 }。

3. 混入的生命周期优先于组件生命周期执行

生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。

// mixin.js
export default {
  beforeCreate() {
    console.log('我是mixin的beforeCreated')
  },
  created() {
    console.log('我是mixin的created')
  },
  beforeMount() {
    console.log('我是mixin的beforeMount')
  },
  mounted() {
    console.log('我是mixin的mounted')
  }
}

// Vue组件
<script>
import mixin from '../mixin'
export default {
  mixins: [mixin],
  beforeCreate() {
    console.log('我是vue组件的beforeCreated')
  },
  created() {
    console.log('我是vue组件的created')
  },
  beforeMount() {
    console.log('我是vue组件的beforeMount')
  },
  mounted() {
    console.log('我是vue组件的mounted')
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

上述代码执行结果为：
我是mixin的beforeCreated
我是vue组件的beforeCreated
我是mixin的created
我是vue组件的created
我是mixin的beforeMount
我是vue组件的beforeMount
我是mixin的mounted
我是vue组件的mounted

4. 值为对象的选项键名冲突时，取组件对象的键值对

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

// minxin.js
export default {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

// Vue组件
<script>
import mixin from '../mixin'
export default {
  mixins: [mixin],
   methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

上述代码结果：
foo() => “foo”
bar() => “bar”
conflicting() => “from self”