vue.mixin() 为所有组件注入逻辑，必须在 new vue() 前于 main.js 中注册；其方法可直接调用但会被组件同名方法覆盖，生命周期钩子与组件共存且按注册顺序执行，适用于埋点、权限初始化等全局逻辑，但因不可逆、易冲突、难调试而被官方慎用。

Vue2 中使用 Vue.mixin() 可以为所有组件自动注入数据、方法、生命周期钩子等，但必须清楚它的作用范围和潜在风险。它不是“加个方法就能随处调用”的快捷方式，而是一种影响全局行为的底层机制。

在 main.js 中注册全局混入

这是唯一正确的位置。全局混入必须在创建根实例（new Vue(...)）之前执行，否则不会生效：

• 新建一个混入文件，例如 src/mixins/globalMethods.js：

export default {
  methods: {
    toast(msg) { this.$message?.({ message: msg, type: 'success' }); },
    formatDate(date) { return date ? new Date(date).toLocaleDateString() : ''; },
  },
};

• 在 main.js 中引入并调用 Vue.mixin：

import Vue from 'vue';
import globalMethods from './mixins/globalMethods';

Vue.mixin(globalMethods); // 必须放在 new Vue() 之前

new Vue({ ... }).$mount('#app');

组件内直接使用注入的方法

无需 import、无需声明 mixins 数组，所有组件实例都可直接调用：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• this.toast('操作成功')
• this.formatDate('2026-07-29')
• 如果组件自身也定义了同名方法（如 toast），则组件自己的方法会覆盖混入的版本

注意生命周期钩子的合并逻辑

全局混入中的 created、mounted 等钩子不会替换组件自身的钩子，而是与之共存：

• 执行顺序是：混入的钩子 → 组件的钩子
• 多个混入时，按注册顺序从上到下依次执行
• 适用于统一埋点、权限初始化、日志记录等跨组件通用逻辑

为什么官方强调“慎用”？

全局混入不可逆、无边界，容易引发隐性问题：

• 第三方 UI 组件（如 Element UI 的 el-table）也会被注入，可能干扰其内部行为
• 命名冲突难排查，比如你定义了 getData，某组件也定义了，结果覆盖后导致功能异常
• 调试困难：控制台看到的 this 上多出一堆方法，却不知来源
• Vue3 已移除该 API，项目升级时需重构成 composition API 或 provide/inject

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！