vue3.0 mixin 混入
首先是官方定义:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
通俗来讲,就是 mixin 中的属性,比如 data、methods 或者自定义属性,将被混入到全部或者指定的组件中,让这些组件可以调用 mixin 中所定义的属性或者事件
全局 mixin
首先,我们直接定义全局的 mixin
// 定义全局 mixin app.mixin({ message: 'mixin', data() { return { count: 100, }; }, });
混入 data
全局mixin默认会混入所有组件中,接下来,我们再定义一个组件,模板中插入
message字段,如下所示:
const app = Vue.createApp({ template: ` <div>{{message}}</div> `, });
此时mixin中的data属性将会混入到组件中,虽然组件的 data 中并没有包含 message 字段,但是在运行的页面中依然显示出 message 的值
mixin message。现在,我们在组件内部的 data 中也添加 message 字段。
const app = Vue.createApp({ data() { return { message:'app message' } } ... });
这时候,运行页面,模板中的内容将显示组件中 data 里的值
app message,这说明,组件内部 data 的优先级是高于 mixin 内部 data 的优先级的。
混入事件(methods)
同样的,我们也可以一下测试事件的优先级
const app = Vue.createApp({ ... methods: { handleClick() { console.log('app click'); } }, // 这里点击元素,会打印出 "app click" template: "<div @click="handleClick">{{message}}</div>" }); // 定义全局 mixin app.mixin({ ... methods: { handleClick() { console.log('mixin click'); } } });
点击div,将会打印出
app click,这说明当 mixin 中和组件中都存在 handleClick 事件时,组件中同名事件优先级会比较高。
混入生命周期函数(created、mounted 等)
下面,我们同时在 mixin 和 app 中定义
created函数
const app = Vue.createApp({ ... created() { console.log("app created"); } }); // 定义全局 mixin app.mixin({ created() { ... console.log("mixin created"); } });
运行此页面,打印台会输出
mixin created app created
也就是说,mixin中的生命周期钩子函数与 app 组件中的钩子函数都会运行,mixin 优先执行
混入自定义属性
我们还可以直接在 mixin 和 app 组件中自定义属性。自定义属性在模板中需要用
$options[prop]的方式调用
const app = Vue.createApp({ message: "app message", template: "<div @click="handleClick">{{$options.message}}</div>" }); // 定义全局 mixin app.mixin({ message: "mixin message" });
运行页面,模板将会展示 app 组件中 message 中的值
app message,可见,自定义属性也是组件比 mixin 优先级高。
修改自定义属性合并策略
如果我们想让 mixin 的优先级高于组件的优先级,我们可以通过以下代码进行修改
app.config.optionMergeStrategies.message = (mixinVal, appVal) => { return mixinVal || appVal; };
合并策略方法中接受两个参数,第一个参数为 mixin 自定义属性值,第二个参数为 app 组件自定义属性值,用户可以通过方法判断来返回哪个值,来定义自定义属性的优先级。
上面代码定义了如果 mixinVal 有值则返回 mixinValue,否则返回 appVal,所以模板中显示的应该的是
mixin message。
局部组件
局部组件的定义,需要显式声明进组件内。
// 1. 声明局部组件变量 const MyMixin = { data() { return { }; }, created() { console.log('mixin created'); }, methods: { handleClick() { }, }, }; // 2. 通过mixins属性注入到要被混合组件中 const app = Vue.createApp({ mixins: [myMixin] })
除了需要通过 mix 56c ins 属性注入,其他与全局组件无差异,所以不在单独阐述。
缺陷
mixin可以将部分组件抽成可重用块,但是他也有不可避免的问题。
- mixin很容易发生冲突,你会不清晰某个值到底是从 mixin 还是 app 来的。
- 可重用性有限,不能通过传递参数修改 mixin 的逻辑,降低了抽象逻辑的灵活性。
总结
这篇文章,我们讲了如下几点:
- mixin的概念及定义
- 混入 data、methods、生命周期函数
- 混入自定义属性,修改自定义属性的混合策略
- 全局 mixin 及 局部 mixin 定义方式
- mixin 的缺陷
- vuex的实现——使用插件及Mixin混入添加全局状态管理(二)
- vue--mixin混入以及虚拟DOM和diff算法
- D语言游戏编程(11):D语言基础之模板和混入(mixin)技术
- Python mixin 混入
- 记一次Vue.js混入mixin的使用(分权限管理页面)
- Vue--mixin(混入)
- Ruby中的Mixin (混入)
- 数据请求 mixin混入 computed计算属性 watch侦听属性
- vue-混入mixin
- 模块(Module)的用途2 混入(Mixin)
- Strategy VS Mixin(番外篇)——动态混入扩展方法
- Vue.js Mixins 混入使用
- less **Mixin**混入
- 混入mixin和自定义插件
- less-mixin(混入)
- 【Vue】混入mixin:基础、选项合并、全局混入、自定义选项合并策略
- D语言中的混入(Mixin)
- vue mixins 混入
- 混入mixin
- dojo 混入 miXin 例子