vue3.x连官网都不亲的选项--Mixin

不足

官网原文如下：

mixin-buzu.png

简单来说不足有二：
1、所有属性都会合并到组件里面，所以相同命名会冲突。
2、写完就定下来了，不够灵活
vue3 提供了 setup，来解决这些问题。

个人见解，其实在vue2的时候就很少使用mixin来抽象逻辑，一般抽象逻辑都会使用一个封装的js对象。而mixin更多的是像封装一个“基类”那样，提供给组件继承，暂时而言个人还是觉得类似于“基类”这样的用法，使用mixin挺好。

基础

mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。例如：

// 定义一个 mixin 对象
const testMixin = {
  created() {
    this.test()
  },
  methods: {
    test() {
      console.log('from test mixin!')
    }
  }
}

export default {
  mixins: [testMixin]
}
// 当这个组件被创建时，会看到日志：from test mixin!

选项合并

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

比如，每个 mixin 可以拥有自己的 data 函数。每个 data 函数都会被调用，并将返回结果合并。该数据的 property 发生冲突时，会以组件自身的数据为优先。

// 定义一个 mixin 对象
const testMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  },
  methods: {
    test() {
      console.log(this.$data)
    }
  }
}

export default {
  mixins: [testMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    this.test() // => { message: "goodbye", foo: "abc", bar: "def" }
  }
}

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

const testMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

export default {
  mixins: [testMixin],
  created() {
    console.log('组件钩子被调用')
  }
}

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

const testMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

export default {
  mixins: [testMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  },
  created() {
    this.foo() // => "foo"
    this.bar() // => "bar"
    this.conflicting() // => "from self"
  }
}

注意
vue3.x Mixin 合并行为发生了变更，当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行：

const testMixin = {
  methods: {
    data() {
      return {
        user: {
          name: 'Jack',
          id: 1
        }
      }
    }
  }
}

export default {
  mixins: [testMixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  },
  created() {
    console.log(this.$data)
  }
}

在 Vue 2.x 中，生成的 $data 是：

{
  "user": {
    "id": 2,
    "name": "Jack"
  }
}

在 3.0 中，其结果将会是：

{
  "user": {
    "id": 2
  }
}

全局 mixin

额，全局mixin还是少用吧，应该说别用吧，这玩意真的真的觉得有点坑。一旦使用全局 mixin，它将影响每一个之后创建的组件 (例如，每个子组件)。
全局mixin如下：

app.mixin({
  created() {
    console.log("form mixin!")
  }
})

光这样一个log，就会导致"form mixin!"竟然会被输出一排。最后强调下，别用！

自定义选项合并策略

自定义选项在合并时，默认策略为简单地覆盖已有值。如果想让某个自定义选项以自定义逻辑进行合并，可以在 app.config.optionMergeStrategies 中添加一个函数：

const app = Vue.createApp({})

app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
  // toVal  组件数据； 
  // fromVal  mixin数据
  // return mergedVal
}

实际开发过程中合并策略也很少使用，更多的会使用一些逻辑代码所代替，这种隐式的写法并不太好理解。

关于setup使用mixin的相关内容后续再写，谢谢阅读。
原创不易，欢迎指正。