一. mixins：混入/复制

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。也就是都会被复制过来和组件本身合并。

语法

要有一个混入对象，和一个使用混入对象的组件

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

举例

假设App.vue上有五个组件，每个组件都有数据name,time; 钩子created, beforeDestroy，被调用时打印提示，并且报出存活时间。

<template>
  <div id="app">
    <Child1 v-if="Child1show"/>
    <button @click="Child1show=false">x</button>
    ...
  </div>
</template>

<script>
import Child1 from "./components/Child1.vue";
...
export default {
  data() {
    return {
      name: "App",
      Child1show: true,
      ...
    };
  },
  components: {
    Child1,
    Child2,
    Child3,
    Child4,
    Child5
  }
};
</script>

通过一个变量控制组件出现或死亡。点击按钮，变量变成false，组件就死亡了，就会调用beforeDestroy 钩子。

混入对象

既然五个组件的选项data,created,beforeDestroy都是一样的，重复写五次太麻烦了。于是就可以使用 mixins 选项。把相同的选项都放到一起，放在一个对象里。然后通过 mixins 选项把这个对象复制过来，和自己的属性合并。

//log.js
const log={
  data() {
    return {
      name: undefined,
      time: undefined
    };
  },
  created() {
    if (!this.name) {
      throw new Error("没有name");
    }
    this.time = new Date();
    console.log(`${this.name} 出生了`);
  },
  beforeDestroy() {
    console.log(`${this.name} 死亡了,存活了 ${new Date() - this.time} ms`);
  }
}

export default log

但是每个组件的name不一样，所以先在mixins对象里定义成undefined，在自己的组件里自己定义name。

使用混入对象的组件

//Child1.vue
<template>
  <div>Child1</div>
</template>

<script>
import log from "../mixins/log.js";
export default {
  data() {
    return {
      name: "Child1"
    };
  },
  mixins: [log]
};
</script>

五个组件只需要import 混入对象，在 mixins 选项里使用混入对象，这个组件就拥有了混入对象里的所有属性，也就是把混入对象的属性都复制过来。

智能合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

这个例子里，混入对象和组件都有一个name属性，结果是以组件自己选项里的name优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

二.

directives 的作用是减少DOM操作的重复

mixins 的作用是减少data , methods , 钩子的重复,即构造选项的重复

选项extends ：继承

与mixins类似，也是把一个对象的属性继承过来，当成自己的

用的很少

const myVue=Vue.extend({
    data() {
        return {
        name: undefined,
        time: undefined
        };
    },
    created() {
        if (!this.name) {
          throw new Error("没有name");
        }
        this.time = new Date();
        console.log(`${this.name} 出生了`);
    },
    beforeDestroy() {
        console.log(`${this.name} 死亡了,存活了 ${new Date() - this.time} ms`);
    }
})
export default myVue

使用 Vue.extend 基于基础 的Vue 构造器，创建一个“子类” myVue。然后可以使用 new myVue()

Vue.extend() 里边也可以使用mixins，如：

const myVue=Vue.extend({
    mixins:[log]
})

在组件里：

import myVue from './myvue.js'
export default{
    extends:myVue,
}

这里extends不是数组，因为只能继承一个

总结

能用mixins，就用mixins。因为同样都是先导入，再加一个mixins/extends选项。

除非你有很多个mixins，不想都写一遍。就把这么多mixins一次性写在Vue.extend({}) 里边，然后只写一个extends。不过这种情况也很少见