Vue的mixins属性mixins(混入)，其本质就是复制，它的作用是减少data,method,钩子这些构造选项的重

一 mixins

mixins(混入)，其本质就是复制，它的作用是减少data,method,钩子这些构造选项的重复。
mixins(混入) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

二代码示例

对于如下代码，需求为，Child1和Child2组件在created的时候打印出"hello from mixin!"四个字。我们可以在每个组件中的created中打印，但是如果是10个组件或者更多。又或者需求不是打印字符串，而是更复杂的功能，此时会导致很多重复的代码。这时就可以使用mixins来减少重复。

  <div id="app">
        <Child1></Child1>
        <Child2></Child2>
  </div>

具体用法如下

  //log.js
  const log = {
    created: function() {
      console.log("hello from mixin!");
    },
  };
  export default log;

上面就是mixins代码，在每个组件中引入此代码即可，引用方法如下

  //Child1.vue
  <template>
    <div class="Child1">child1</div>
  </template>
  <script>
  import log from "../log.js";//引入代码
  export default {
    name: "Child1",
    mixins: [log],//使用代码
  </script>

如果想要创建Child1时打印"你好child1",想要创建Child2时打印"你好child2",这时代码可以改为如下形式

  const log = {
    data() {
      return {
        name: undefined,//新增代码
      };
    },
    created: function() {
      if (!this.name) {
        throw new Error("need name");
      }
      console.log(`你好${this.name}`);
    },
  };
  export default log;

  //Child1.vue
  <template>
    <div class="Child1">child1</div>
  </template>
  <script>
  import log from "../log.js";//引入代码
  export default {
    name: "Child1",
    data() {
      return {
        name: child1,//新增代码
      };
    },
    mixins: [log],//使用代码
  </script>

log.js中的name会自动与组件中的name合并。与普通复制不同得是，这里是智能合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

Vue.mixin不推荐使用，混入范围太大。

Vue的mixins属性

一 mixins

二 代码示例

二代码示例