vue-mixins混入模式的理解与使用

用法：

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

关于重复的定义

1.如果在mixins复用文件里声明了一个data属性或者methods方法，同时，在具体文件里也重复声明了属性或方法，在实际执行该组件时，会优先选择具体文件内的属性或者方法

<script>
import {testData} from './test.js';
export default {
  name: "HelloWorld",
  mixins: [testData],
  data() {
    return {
      info:'info-1' 
    };
  },
  mounted() {
    console.log('查看一下info来源：', this.info)
  },
 }
 </script>

mixins文件

export const testData =  {
  data(){
    return {
      info: 'info-2'
    }
  },
}

这里，代码实际执行的不是mixins内的data的属性，由此可知，如果重复声明了属性或者方法，会优先使用具体代码内的那一部份内容。

如果调用mixins的问题内没有声明，则就会使用mixins内的部分。

2.对于生命周期的混合复用，没有优先级也没有覆盖，比如，在组件本身和mixins文件里的mounted声明周期钩子函数内同样都做了某项事情，实际执行时，两处都会执行。
代码所示：

<script>
import {testData} from './test.js';
export default {
  name: "HelloWorld",
  mixins: [testData],
  data() {
    return {
      // info:'info-1'
    };
  },
  mounted() {
    console.log('mounted执行1')
  }
}

mixins

export const testData =  {
  mounted(){
    console.log('mounted执行2')
  },
}

全局混入mixins

此处是vue全局混入的一个示例