Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
简单来说不足有二:
1、所有属性都会合并到组件里面,所以相同命名会冲突。
2、写完就定下来了,不够灵活
vue3 提供了 setup,来解决这些问题。
个人见解,其实在vue2的时候就很少使用mixin来抽象逻辑,一般抽象逻辑都会使用一个封装的js对象。而mixin更多的是像封装一个“基类”那样,提供给组件继承,暂时而言个人还是觉得类似于“基类”这样的用法,使用mixin挺好。
目录
基础
mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。例如:
写法一:
在mixins文件夹新建一个mixin文件,这种方式需要最后导出。在组件中使用的时候需要import导入,然后mixins:[text1Mixin1]
// 一.基础用法
// 定义一个mixin对象,在export default中导出
const textMixin1 = {
data() {
return {
msg: 'textMinin1'
}
},
created() {
this.test();
},
methods: {
test() {
console.log("from text mixin!");
},
},
};
export default textMixin1//导出
import textMixin2 from "../mixin/textMixin2";
export default {
// mixins: [textMixin1],
mixins: [textMixin2],
写法二:
// 定义一个 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对象和组件都有message对象,所以先以组件的为主,然后把其他数据聚合
}
}
同名钩子函数将合并为一个数组,因此都将被调用。另外,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!")
}
})
// 全局混入
// var obj={
// data() {
// return {
// msg:'hello'
// }
// },
// }
// createApp(App).mixin(obj).use(store).use(router).mount('#app')
自定义选项合并策略
自定义选项在合并时,默认策略为简单地覆盖已有值。如果想让某个自定义选项以自定义逻辑进行合并,可以在
app.config.optionMergeStrategies 中添加一个函数:
const app = Vue.createApp({})
app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
// toVal 组件数据;
// fromVal mixin数据
// return mergedVal
}
实际开发过程中合并策略也很少使用,更多的会使用一些逻辑代码所代替,这种隐式的写法并不太好理解。