vue常用设计模式有五类：一是观察者模式，支撑响应式数据更新；二是发布-订阅模式，实现组件间松耦合通信；三是单例模式，保障全局状态与服务唯一性；四是组合式api，按功能域封装复用逻辑；五是插件模式，通过vue.use扩展框架能力。
Vue 开发中并没有固定数量的设计模式清单，而是根据实际问题自然浮现的、被反复验证有效的组织方式。真正常用且有明确技术体现的，集中在以下几类。
响应式核心：观察者模式
这是 Vue 数据驱动视图的底层逻辑。每个响应式数据属性背后都有一个或多个 Watcher（观察者），当数据变化时，自动触发对应视图更新或计算属性重求值。Vue 2 用 Object.defineProperty 拦截 getter/setter，Vue 3 则升级为 Proxy，但模式本质未变——一对多依赖、状态变更通知、自动更新。
你写 data() { return { count: 0 } }，再在模板里用 {{ count }}，就已经在用观察者模式了。
组件通信与解耦：发布-订阅模式
它和观察者模式常被混淆，但关键区别在于“中介”。Vue 的 $emit / $on、事件总线（Event Bus），以及现代项目中 Pinia 的 store.$onAction，都属于发布-订阅：组件不直接引用对方，而是通过一个中央事件通道收发消息。
适合场景：非父子关系组件通信、跨层级松耦合通知（比如全局提示、权限变更广播）。
状态管理与全局服务：单例模式
确保某个功能在整个应用中只存在一个实例，并提供统一访问入口。Vuex Store、Pinia Store、Vue Router 实例、Axios 实例、自定义的 API service 对象，基本都遵循这一模式。
好处是避免状态冲突、内存浪费，也便于调试和拦截。你在 main.js 里创建一次 store，然后所有组件通过 useStore() 获取，就是典型的单例使用方式。
逻辑复用与组织：组合式 API（Composition API）
这不是传统 GOF 设计模式，但已成为 Vue 3 中最主流的工程实践模式。它把相关逻辑（数据、方法、生命周期钩子）按功能域封装成函数（如 useCounter、useFetch），再在组件中导入调用。
优势明显：
• 避免 Options API 中逻辑分散在 data/methods/watch 等多个选项里
• 跨组件复用更自然，无需 mixins 的命名冲突和隐式依赖
• 类型推导更友好，尤其配合 TypeScript
扩展能力：插件模式
通过 Vue.use() 安装插件，本质是让第三方代码获得对 Vue 构造函数或应用实例的访问权，从而添加全局组件、指令、方法或混入逻辑。
常见例子：
• vue-router 注入 $router 和 $route
• element-plus 提供全局组件和主题配置
• 自研的权限指令 v-permission 也是靠插件注册进来的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
