不足
官网原文如下：
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的相关内容后续再写，谢谢阅读。
原创不易，欢迎指正。
网友评论