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搜【程序员大澈】,最后感谢朋友们给个点赞、分享、推荐,拜拜~

相关推荐
前端Hardy24 分钟前
HTML&CSS:超丝滑抛物线飞入购物车效果
前端·javascript·css
VisuperviReborn25 分钟前
打造自己的前端监控---前端错误监控
前端·javascript·vue.js
wayhome在哪27 分钟前
面试造火箭 入职拧螺丝
vue.js·面试·jquery
汪子熙28 分钟前
聊一聊 TypeScript 里的类型别名
前端·javascript
西岭千秋雪_42 分钟前
前端工程化:npm&vite
前端·javascript·npm·node.js
BUG收容所所长1 小时前
HoverMask与SelectedMask——如何让低代码平台的交互体验更加直观?
前端·javascript·设计
Mintopia1 小时前
🌐AIGC:从硅芯片中孕育的缪斯女神
前端·javascript·aigc
掘金安东尼1 小时前
⏰前端周刊第425期(2025年7月28日–8月3日)
前端·javascript·面试
namehu1 小时前
为什么我的margin-top被转换为vw而不是vh?
javascript·css·postcss
雪中何以赠君别1 小时前
Vite + Axios + Nginx 环境变量与代理配置笔记
前端·javascript·vue.js