Vue中mixin混合

vue中的mixin可以实现组件中重复代码的高度复用，可以将不同组件中重复的组件选项（如，data、created、mounted、components、computed、watch等）都提取出来，形成一个mixin的js文件，在需要用到这些代码时，引入这个js文件即可。

用法

通过mixins属性添加，mixins属性是一个数组，可以添加多个mixin

// mixin.js
export const mixin = {
    // 混合里面可以写入data, methods, computed...等所有
    data(){
        return {
            name: "XX",
            address: "TianJin",
            age: 18
          }
    },
    methods:{
        showDom(){
            console.log(this.$refs)
        }
    }
}

// .vue
import { mixin } from "../mixin.js"
export default {
  name: "School",
  data() {
    return {
      name: "TT",
      address: "BeiJing"
    }
  },
  mixins: [mixin]
}

特点

当组件和mixin有重复时：

1.若重复的是data，则组件内原本数据会覆盖mixin中的重复数据，若为对象，则深度合并

2.若重复的是对象（如props、methods、inject、computed等），在组件中若有同名的键名存在，则mixin中的会被覆盖，以组件中定义的为准

3.若重复的是component、directives、filters，则优先使用组件中原本的值；若组件中没有，则去mixin中寻找