vue mixin 及 与组件加载顺序解析

混入 (mixins)：

是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

混入 (mixins)的用法：

在utils目录下新建myMixin.js定义一个混入对象

export const myMixin={
  data(){
    return {
      testLiang:222
    }
  },
  methods:{
    hello(){
     console.log(this.testLiang++)
    }
  }
}

把混入对象引入到组件组中

<template>
  <div>
    设置{{ testLiang }}<a @click="hello">点击</a>
  </div>
</template>

<script>
  import {myMixin} from  "@/utils/my-mixin";

  export default {
  name: "invoice-setting",
  mixins: [myMixin],
  data() {
    return {

    };
  },
  created() {
  },
  mounted() {
  }
};
</script>

混入 (mixins)的特点：

• 方法和参数在各组件中不共享

  在两个组件中引入混入对象 两个地方的data值互不共享
  

• 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的

  组件和混入对象中的值及方法相同冲突时，组件中的方法及值会覆盖混入对象，【组件中的优先】
  

• 值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

    mixins里面在created,mounted等里调用和组件中里面在created,mounted等里的调用都会被执行
  

vue mixin 与组件应用加载顺序

mixin混入beforeCreate =》组件混入beforeCreate =》mixin混入created=》组件混入created=》mixin混入beforeMount=》组件混入beforeMount=》mixin混入mounted=》组件混入mounted