Vue.mixin 的使用场景和原理
Vue.mixin 的使用场景和原理
在日常开发中会经常遇到在不同的组件中有相同的代码和逻辑，这些代码的功能相对独立，可以通过Vue的Mixin抽离公共的业务逻辑，原理类似于“对象的继承”，当组件初始化时会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并，当组件和混入对象有同名选项时，这些选项将以恰当的方式进行合并。
相关实现代码：
scss
复制代码
/*
* @Author: cq
* @Date: 2021-07-24 00:35:13
* @LastEditTime: 2021-07-24 00:53:45
*/
export default function initMixin(Vue) {
Vue.mixin = function (mixin) {
//合并对象
this.options = mergeOptions(this.options, mixin)
}
}
// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [ "beforeCreate", "created", "beforeMount", "mounted", "beforeUpdate", "updated", "beforeDestroy", "destroyed",];
//合并策略
const starts = {};
//mixin核心方法
export function mergeOptions(parent, child) {
const options = {};
//遍历父组件
for (let k in parent) {
mergeFiled(k);
}
//父亲没有，儿子有
for (let k in child) {
if (parent.hasOwnProperty(k)) {
mergeFiled(k)
}
}
//核心:合并字段的方法
function mergeFiled(k) {
if (starts[k]) {
options[k] = starts[k](parent[k], child[k]);
} else {
//默认策略
options[k] = child[k] ? child[k] : parent[k];
}
}
return options;
}
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
- 上周热门
- 银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示 1487
- 银河麒麟打印带有图像的文档时出错 1405
- 银河麒麟添加打印机时，出现“server-error-internal-error” 1194
- 统信操作系统各版本介绍 1116
- 统信桌面专业版【如何查询系统安装时间】 1114
- 统信桌面专业版【全盘安装UOS系统】介绍 1068
- 麒麟系统也能完整体验微信啦！ 1026
- 统信【启动盘制作工具】使用介绍 672
- 统信桌面专业版【一个U盘做多个系统启动盘】的方法 616
- 信刻全自动档案蓝光光盘检测一体机 526
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 信创开放社区邀请他人注册的具体步骤如下 15
- 如何玩转信创开放社区—从小白进阶到专家 15
- 方德桌面操作系统 14
- 我有15积分有什么用? 13
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
