如何在Vue3项目中构建高效消息通知系统：从ElMessage到Notification

2026-05-02 11:20:34作者：魏侃纯Zoe

消息通知系统是现代Web应用提升用户体验的关键组件，尤其在后台管理系统中，及时、准确的反馈能显著降低用户操作成本。Vue3项目结合Element Plus提供了完善的消息通知解决方案，通过轻量级操作反馈与持久化系统通知的有机结合，可构建既不打扰用户又能确保关键信息有效传达的通知体系。本文将从实际业务场景出发，系统解析Vue3环境下两种核心消息组件的技术实现与最佳实践，帮助开发者掌握消息通知系统的设计精髓。

一、消息通知场景分类与技术选型

在电商后台管理系统中，消息通知承担着业务流程反馈与系统状态同步的双重职责。根据信息的紧急程度与交互需求，可将消息通知分为三大类：即时操作反馈、重要系统通知和异步任务结果通知，每种类型对应不同的技术实现方案。

1.1 即时操作反馈：ElMessage组件应用

典型场景：订单状态更新、库存调整、表单提交等用户主动操作的结果反馈。这类消息具有"时效性强、交互简单、自动消失"的特点，适合使用Element Plus的ElMessage组件实现。

核心功能：

自动定时消失（默认3秒）
顶部居中显示，不阻断用户当前操作
支持success/error/warning/info四种状态样式
可配置显示时长与关闭按钮

技术实现：

// 订单管理模块中使用ElMessage示例
import { ElMessage } from 'element-plus';

// 取消订单操作反馈
const cancelOrder = async (orderId: string) => {
  try {
    await orderAPI.cancel(orderId);
    // 操作成功提示
    ElMessage.success({
      message: '订单取消成功',
      duration: 2000 // 自定义显示时长为2秒
    });
    // 刷新订单列表
    fetchOrderList();
  } catch (error) {
    // 错误处理提示
    ElMessage.error({
      message: '取消订单失败：' + (error as Error).message,
      showClose: true // 显示关闭按钮
    });
  }
};

1.2 重要系统通知：Notification组件应用

典型场景：新订单提醒、库存预警、系统公告等需要用户明确关注的信息。这类通知具有"重要性高、需要持久展示、可交互"的特点，适合使用Element Plus的Notification组件或自定义通知中心实现。

核心功能：

右上角悬浮展示，支持手动关闭
可包含标题、内容、图标等丰富信息
支持点击查看详情
可配置停留时长与位置

技术实现：

// 新订单通知示例
import { ElNotification } from 'element-plus';
import { useOrderStore } from '@/store/modules/order';

// 监听新订单事件
const orderStore = useOrderStore();
orderStore.$on('newOrder', (order) => {
  ElNotification({
    title: '新订单提醒',
    message: `订单号：${order.sn}，金额：${order.amount}元`,
    type: 'info',
    duration: 0, // 不自动关闭
    position: 'top-right',
    onClick: () => {
      // 点击通知跳转到订单详情页
      router.push(`/order/detail/${order.id}`);
    }
  });
});

二、技术解析：从基础使用到深度定制

2.1 3步实现表单操作反馈系统

问题：在复杂表单提交场景中，如何确保用户清晰了解操作结果？

解决方案：构建统一的表单操作反馈工具，结合业务逻辑提供标准化消息提示。

实现步骤：

创建消息工具类：

// src/utils/message.ts
import { ElMessage, ElMessageBox } from 'element-plus';

export const MessageUtil = {
  // 操作成功提示
  success(message: string) {
    ElMessage.success({
      message,
      duration: 2000
    });
  },
  
  // 操作错误提示
  error(message: string) {
    ElMessage.error({
      message,
      showClose: true
    });
  },
  
  // 确认对话框
  confirm(message: string, title: string = '确认操作') {
    return ElMessageBox.confirm(message, title, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
  }
};

在表单组件中应用：

<!-- src/views/order/form.vue -->
<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <!-- 表单内容 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交订单</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MessageUtil } from '@/utils/message';
import { orderAPI } from '@/api/order';

const formRef = ref();
const form = ref({ /* 表单数据 */ });

const submitForm = async () => {
  try {
    await formRef.value.validate();
    await orderAPI.create(form.value);
    MessageUtil.success('订单创建成功');
    // 关闭表单模态框等后续操作
  } catch (error) {
    if (error.name === 'ValidationError') {
      MessageUtil.error('表单验证失败，请检查输入');
    } else {
      MessageUtil.error('订单创建失败：' + (error as Error).message);
    }
  }
};
</script>

统一错误处理：

// src/utils/request.ts
import axios from 'axios';
import { MessageUtil } from './message';

const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL
});

// 响应拦截器
request.interceptors.response.use(
  response => response.data,
  error => {
    const message = error.response?.data?.message || error.message;
    // 根据错误码显示不同提示
    if (error.response?.status === 403) {
      MessageUtil.error('权限不足，请联系管理员');
    } else {
      MessageUtil.error('操作失败：' + message);
    }
    return Promise.reject(error);
  }
);

export default request;

2.2 WebSocket实时通知集成指南

问题：如何实现服务端主动推送的实时通知，如订单状态变更、库存预警等？

解决方案：使用STOMP协议结合WebSocket建立持久连接，实现服务端消息推送。

实现步骤：

WebSocket连接管理：

// src/composables/websocket/useStomp.ts
import { Stomp } from '@stomp/stompjs';
import { ref, onUnmounted } from 'vue';
import { useUserStore } from '@/store/modules/user';

export const useStomp = () => {
  const client = ref<any>(null);
  const isConnected = ref(false);
  
  // 建立连接
  const connect = () => {
    const userStore = useUserStore();
    client.value = Stomp.client('ws://your-websocket-url');
    
    client.value.connect(
      { Authorization: `Bearer ${userStore.token}` },
      () => {
        isConnected.value = true;
        console.log('WebSocket连接成功');
      },
      (error: any) => {
        isConnected.value = false;
        console.error('WebSocket连接失败', error);
        // 尝试重连
        setTimeout(connect, 5000);
      }
    );
  };
  
  // 订阅主题
  const subscribe = (topic: string, callback: (message: any) => void) => {
    if (!isConnected.value) return;
    return client.value.subscribe(topic, (message: any) => {
      callback(JSON.parse(message.body));
    });
  };
  
  // 断开连接
  const disconnect = () => {
    if (client.value && client.value.connected) {
      client.value.disconnect();
      isConnected.value = false;
    }
  };
  
  onUnmounted(disconnect);
  
  return { connect, disconnect, subscribe, isConnected };
};

通知中心组件实现：

<!-- src/components/NotificationCenter/index.vue -->
<template>
  <div class="notification-center">
    <el-badge v-if="unreadCount > 0" :value="unreadCount" :max="99">
      <el-icon class="notification-icon" @click="toggleDropdown">
        <Bell />
      </el-icon>
    </el-badge>
    <el-dropdown v-model:visible="dropdownVisible" placement="bottom-end">
      <template #dropdown>
        <div class="notification-dropdown">
          <div class="dropdown-header">
            <span>通知中心</span>
            <el-button size="text" @click="markAllAsRead">全部已读</el-button>
          </div>
          <div class="dropdown-body">
            <div v-for="notice in notices" :key="notice.id" class="notice-item" @click="handleRead(notice)">
              <div class="notice-title">{{ notice.title }}</div>
              <div class="notice-time">{{ formatTime(notice.createTime) }}</div>
            </div>
            <div v-if="notices.length === 0" class="empty-notice">暂无通知</div>
          </div>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { Bell } from '@element-plus/icons-vue';
import { useStomp } from '@/composables/websocket/useStomp';
import { noticeAPI } from '@/api/notice';
import { MessageUtil } from '@/utils/message';

const notices = ref([]);
const unreadCount = ref(0);
const dropdownVisible = ref(false);

const { connect, subscribe, isConnected } = useStomp();

// 加载通知列表
const loadNotices = async () => {
  try {
    const data = await noticeAPI.getUnreadList();
    notices.value = data;
    unreadCount.value = data.length;
  } catch (error) {
    MessageUtil.error('加载通知失败');
  }
};

// 标记全部已读
const markAllAsRead = async () => {
  try {
    await noticeAPI.markAllRead();
    notices.value = [];
    unreadCount.value = 0;
    MessageUtil.success('全部通知已标记为已读');
  } catch (error) {
    MessageUtil.error('操作失败');
  }
};

// 处理通知阅读
const handleRead = async (notice) => {
  try {
    await noticeAPI.markRead(notice.id);
    notices.value = notices.value.filter(item => item.id !== notice.id);
    unreadCount.value--;
    // 打开通知详情
    // ...
  } catch (error) {
    MessageUtil.error('标记已读失败');
  }
};

onMounted(() => {
  connect();
  loadNotices();
  
  // 监听WebSocket连接状态
  watch(isConnected, (connected) => {
    if (connected) {
      // 订阅通知主题
      subscribe('/topic/notice', (message) => {
        // 收到新通知
        notices.value.unshift(message);
        unreadCount.value++;
        
        // 显示通知提示
        ElNotification({
          title: '新通知',
          message: message.title,
          type: 'info'
        });
      });
    }
  });
});
</script>

三、最佳实践与性能优化

3.1 消息组件性能优化策略

问题：频繁触发消息提示可能导致页面性能问题，如何优化？

解决方案：实现消息队列与节流控制，避免消息泛滥。

实现代码：

// src/utils/messageQueue.ts
import { ElMessage } from 'element-plus';

// 消息队列
const messageQueue: Array<{
  type: 'success' | 'error' | 'warning' | 'info';
  message: string;
  options?: any;
}> = [];

// 是否正在显示消息
let isShowing = false;

// 显示下一条消息
const showNextMessage = () => {
  if (messageQueue.length === 0) {
    isShowing = false;
    return;
  }
  
  isShowing = true;
  const { type, message, options } = messageQueue.shift()!;
  
  ElMessagetype;
};

// 添加消息到队列
export const queueMessage = (
  type: 'success' | 'error' | 'warning' | 'info',
  message: string,
  options: any = {}
) => {
  messageQueue.push({ type, message, options });
  
  if (!isShowing) {
    showNextMessage();
  }
};

// 使用示例
// queueMessage('success', '操作成功');

3.2 常见问题排查与解决方案

问题1：消息提示不显示或一闪而过

可能原因：

组件未正确引入或注册
消息被其他元素遮挡
页面存在多个版本的Element Plus

解决方案：

// 确保正确引入
import { ElMessage } from 'element-plus';

// 检查z-index设置
ElMessage.success({
  message: '测试消息',
  customClass: 'high-z-index' // 在样式中定义.high-z-index { z-index: 9999 !important; }
});

// 检查package.json中Element Plus版本是否唯一

问题2：WebSocket连接频繁断开

可能原因：

网络不稳定
服务端配置问题
缺少心跳机制

解决方案：

// 增加心跳机制
const setupHeartbeat = (client) => {
  const heartbeatInterval = setInterval(() => {
    if (client.connected) {
      client.send('/heartbeat', {}, 'ping');
    }
  }, 30000); // 每30秒发送一次心跳
  
  return () => clearInterval(heartbeatInterval);
};