vue2【详解】mixins —— 抽离公共逻辑

mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等

使用方法

  1. 创建文件myMixin.js
js 复制代码
export const myMixin = {
    data() {
        return {
            webName: '朝阳的博客'
        }
    },
    created() {
        alert(`欢迎来到${this.webName}`)
    },
    methods: {
        hi() {
            alert(`欢迎来到${this.webName}`)
        }
    }
}
  1. vue文件中引入并使用myMixin.js
js 复制代码
import {myMixin} from './myMixin.js'
js 复制代码
export default {
    mixins: [myMixin],

mixins的值为一个数组,可以传入多个minxins

js 复制代码
 mixins: [myMixin1,myMixin2],

注意事项

  • mixins中的变量和方法与vue文件中的变量和方法同名时,vue文件中的变量和方法会覆盖mixins中的
  • mixins中函数(如生命周期钩子函数)会在vue中的函数之前执行
    • 如mixins和vue中都有mounted生命周期钩子函数,则mixins中的先执行,vue文件中的后执行。
  • 不同vue文件引入同一个mixins时,mixins中定义的变量都属于各自的vue实例,相互之间互不影响。
  • 全局混入会影响每个单独创建的 Vue 实例 ,包括第三方组件,所以使用时格外小心。

mixins 的缺点

  • 变量来源不明确,不利于阅读
  • 多 mixin 可能会造成命名冲突
  • mixin 和组件可能出现多对多的关系,复杂度较高
相关推荐
王王碎冰冰6 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼7 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队8 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好8 小时前
pinia从定义到运用
前端·vue.js
代码小学僧8 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜9 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥12 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT14 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安14 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js