对mixins的理解以及使用

mixins

mixins选项接收一个混入对象的数组，这些混入对象可以想像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，混入提供了一种非常灵活的方式，来分发vue组建中的功能，当组建使用混入对象时，所有混入对象的选项将混合进入该组建本身的选项。
例

//mixin组建
export default {
  data() {
    return {
      message: "hello i am mixin"
    };
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
mixins: [subProps],
  mounted() {
    console.log(this.message);//hello i am mixin
  },

选项合并

当组建和混入对象含有同名选项时，如数据对象会在内部进行递归合并，并在发生冲突时以组建数据优先。
例

//mixin组建
export default {
  data() {
    return {
      message: "hello",
      foo: "abc"
    };
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
  data() {
    return {
      message: "good",
      bar: "bye",
    };
  },
  mixins: [subProps],
  mounted() {
    console.log(this.message);//good
    console.log(this.bar);//bye
    console.log(this.foo);//abc
  },

混入对象的钩子将在组建自身钩子之前调用

//mixin组建
export default {
  data() {
    return {
      message: "hello",
      foo: "abc"
    };
  },
  created() {
    console.log("abc");
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
  created() {
    console.log("def");
  },
  mixins: [subProps],
  //abc   def