目录

4个 Vue mixin 的原理拆解

大家好,我是大澈!一个喜欢结交朋友的老程序员👨🏻💻,关注我,科技未来或许我能帮到你!

在 Vue2 中,存在一个冷门API, 那就是 mixin,反正我没怎么用过,哈哈。

下面一起对 mixin 的原理进行拆解,重点是对比一下 Vue3 hook 的存在和妙用。

一、核心逻辑

Vue 在创建组件实例时,Vue.mixin 或 局部mixin 会调用其内部的 mergeOptions 方法,将 mixin 选项和组件自身的选项合并起来。

合并过程中,不同类型的选项(如 data、生命周期钩子、methods 等)采用不同的合并策略,确保各自的逻辑既不会互相覆盖又能协同工作。

二、合并策略

在选项合并过程中,Vue 对不同类型的选项采用了不同的策略。

对于生命周期钩子,策略函数会将两者合并成一个数组,mixin 的先执行,组件的后执行。

对于 data,调用两者各自的函数返回对象,并合并成一个对象,如果存在相同 key,组件中的定义会覆盖 mixin 中的定义。

对于其它API,如 methods、computed、watch、props、directives、components、filters,分别合并成一个对象,如果存在相同 key,组件中的定义会覆盖 mixin 中的定义。

三、优缺点

优点:代码复用、简化三方库配置。

缺点:命名冲突、全局污染。

四、对比 Vue3 hook

在 Composition API 中,你需要在组件的 setup 函数中明确调用并解构需要的 hook。

这种方式使得组件依赖的逻辑和数据一目了然,不像 mixin 那样自动注入所有选项,避免了全局污染。

独立的 hook 将逻辑封装在一个函数内,使得每个 hook 的功能单一且职责明确,避免了命名冲突。

好了,今天要分享的内容就是这么多,联系和更多内容在绿色App搜【程序员大澈】,最后感谢朋友们给个点赞、分享、推荐,拜拜~

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
琑952 小时前
Next.js项目MindAI教程 - 第四章:用户认证系统
开发语言·javascript·数据库·人工智能·mysql·typescript·node.js
计算机毕设定制辅导-无忧学长7 小时前
HTML 新手入门:从零基础到搭建第一个静态页面(二)
前端·javascript·html
冷琴19968 小时前
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统源码+运行
vue.js·python·django
烛阴8 小时前
JavaScript 函数对象与 NFE:你必须知道的秘密武器!
前端·javascript
eli9608 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
老K(郭云开)8 小时前
最新版Chrome浏览器加载ActiveX控件技术--allWebPlugin中间件一键部署浏览器扩展
前端·javascript·chrome·中间件·edge
老K(郭云开)8 小时前
allWebPlugin中间件自动适应Web系统多层iframe嵌套
前端·javascript·chrome·中间件
绿草在线9 小时前
Vue3 开发的 VSCode 插件
ide·vue.js·vscode
银之夏雪9 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
巴巴博一9 小时前
Tailwindcss开启黑夜模式
css·vue.js