vue2mixin合并规则

混入可以说是vue的代码复用的另一个顶级杀手

官方文档

混入顺序

混入是一个数组，所以我们放入多个混入的时候，这个混入的顺序就很重要，因为这个会影响最终合并出来的对象

新建文件

Mixin01.ts

import {ComponentOptions} from "vue/types/options";

export const mixin01:ComponentOptions<any>={
  data(){
    return{
      mixin: '01'
    }
  }
}

Mixin02.ts

import {ComponentOptions} from "vue/types/options";

export const mixin02:ComponentOptions<any>={
  data(){
    return{
      mixin: '02'
    }
  }
}

vue

<template>
  <div>
    {{mixin}}
  </div>
</template>

<script>
import {mixin01} from "@/Mixin01";
import {mixin02} from "@/Mixin02";

export default {
  name: 'EmptyHome',
  mixins:[mixin01,mixin02]
}
</script>

<style scoped lang="scss">

</style>

显示的是什么？

这样我们就知道了在混入选项中，靠后的优先级更高，要是加上全局的呢？

添加全局混入

Vue.mixin({
  data(){
    return {
      mixin: 'global'
    }
  }
})

显示的还是02，把混入选项全部注释以后才是显示的global，所以全局混入的优先级是最后的

改一下。混入里面添加混入

vue

<template>
  <div>
    {{mixin}}
  </div>
</template>

<script>
import {mixin01} from "@/Mixin01";

export default {
  name: 'EmptyHome',
  mixins:[mixin01]
}
</script>

<style scoped lang="scss">

</style>

Mixin01.ts

import {ComponentOptions} from "vue/types/options";
import {mixin02} from "@/Mixin02";

export const mixin01:ComponentOptions<any>={
  mixins:[mixin02],
  data(){
    return{
      mixin: '01'
    }
  }
}

Mixin02.ts

import {ComponentOptions} from "vue/types/options";

export const mixin02:ComponentOptions<any>={
  data(){
    return{
      mixin: '02'
    }
  }
}

结果显示的就是01了，和在组件中的顺序是一样的，组件优先O(∩_∩)O

最后

在vue3中，data这个选项的合并已经不是深拷贝了，而是浅拷贝，这个是要注意的，不然写vue3还是按照vue2的想法，可能会找不到bug

欢迎关注：O(∩_∩)O