Vue的Mixins详解及用法

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

如果发生合并冲突，则以组件对象为主。

1.使用场景

多个业务组件的数据或者逻辑相似的时候，可以将公共部分抽取。在各个业务组件中通过 mixins 引入。

2.语法

示例代码用了vue-property-decorator：

/**
* 示例代码抽取的公共部分也是class的形式（由于采用了vue-property-decorator，其提供的Mixins接收参数类型为VueClass）
* 抽取的的公共部分本质也是Vue实例，所以可以拥有常规的选项
*/
import { Vue, Component } from "vue-property-decorator";

@Component({})
export class mixins extends Vue {
  private name = 'yuzhiyong';
  beforeCreate() {
    console.log('c mixins beforeCreatd...');
  }
  created() {
    console.log('c mixins created...');
  }
  mounted() {
    console.log('c mixins mounted...');
  }
  get props():string {
    return "computed...."
  }
  sayHello():string {
    return 'mixins hello...';
  }
}

在业务组件中混入：

// 方式1：使用vue-property-decorator提供的Mixins(),直接继承
// 注意：vue-property-decorator完全依赖vue-class-component，Mixins()本质也是由vue-class-component提供的
<template>
  <div>
   <h2>Mixins</h2>
  </div>
</template>
<script lang="ts">
import { Vue, Prop, Mixins, Component } from "vue-property-decorator";
import { mixins } from "../mixins/mixins-m";

@Component({})
export default class NAME extends Mixins(mixins) {
  // name = "component props"
  created () {
    console.log(this.sayHello());
    console.log('main component created...');
  }
  mounted () {
    console.log('main component mounted...');
  }
  sayHello():string {
    return "component methods..."
  }
}
</script>

// 方式2：在@Component装饰器中使用常规的mixins选项
<template>
  <div>
   <h2>Mixins</h2>
  </div>
</template>
<script lang="ts">
import { Vue, Prop, Component } from "vue-property-decorator";
import { mixins } from "../mixins/mixins-m";

@Component({
  mixins:[mixins]
})
export default class NAME extends Vue {
  // name = "component props"
  created () {
    console.log(this.sayHello());
    console.log('main component created...');
  }
  mounted () {
    console.log('main component mounted...');
  }
  sayHello():string {
    return "component methods..."
  }
}
</script>

3.混入合并（浅合并）

混入组件和业务组件中created、mounted是钩子函数，components、methods 、computed、data是值对象。

如果值对象属性冲突时（即属性同名），业务组件选项优先 。

钩子函数内的代码，mixins和业务组件中的都会被执行，且mixins中的会被先执行。

4.全局混入

import Vue from 'vue'

Vue.mixin({
  private name = 'yuzhiyong';
  beforeCreate() {
    console.log('global beforeCreatd...');
  }
  created() {
    console.log('global created...');
  }
  mounted() {
    console.log('global mounted...');
  }
  get props():string {
    return "computed...."
  }
  sayHello():string {
    return 'mixins hello...';
  }
})

注：全局混入慎用，会影响所有创建的Vue实例。