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

相关推荐
TimelessHaze32 分钟前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
EndingCoder1 小时前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
前端赵哈哈2 小时前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
ITMan彪叔2 小时前
Nodejs打包 Webpack 中 __dirname 的正确配置与行为解析
javascript·后端
风中凌乱的L2 小时前
vue 一键打包上传
前端·javascript·vue.js
GHOME2 小时前
Vue2与Vue3响应式原理对比
前端·vue.js·面试
张元清2 小时前
useMergedRefs: 组件封装必不可少的自定义Hook
前端·javascript·面试
openInula前端开源社区2 小时前
【openInula茶话会】第四期:openInula API2.0编译器原理
前端·javascript
lumi.2 小时前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
sorryhc3 小时前
【AI解读源码系列】ant design mobile——CapsuleTabs胶囊选项卡
前端·javascript·react.js