Vue设计模式实战解析：6种高频模式+源码拆解，面试/开发双适用Vue框架的设计和实现，大量借鉴了经典设计模式，这些模式

Vue框架的设计和实现，大量借鉴了经典设计模式，这些模式贯穿Vue的核心特性（响应式、组件化、指令系统等），既保证了框架的灵活性、可维护性，也让Vue的API设计更符合开发者的使用习惯。不同于通用设计模式，Vue中的设计模式均结合其自身核心逻辑（如响应式、组件树）定制化应用，以下重点讲解Vue开发中高频接触、核心常用的6种设计模式，结合实操示例和源码思路，避免晦涩。

核心前提：Vue中设计模式的核心目标是解耦组件、复用逻辑、简化开发，所有模式都围绕“数据驱动视图”“组件化开发”两大核心思想展开，与Vue的响应式系统、组件机制深度绑定。

一、MVVM模式（Vue的核心架构模式）

MVVM是Vue最核心的架构模式，是“数据驱动视图”的底层支撑，也是Vue区别于jQuery（传统DOM操作）的核心设计，本质是MVC模式的演进，核心是通过ViewModel实现数据与视图的双向绑定，解耦视图与数据逻辑。

核心定义（Vue对应实现）

Model（模型） ：对应Vue中的数据层，负责存储和管理应用数据，不依赖于视图，比如组件的data、props、Pinia/Vuex中的状态，仅关注数据本身和业务逻辑（如数据验证、接口请求后的处理）。
View（视图） ：对应Vue中的模板层，负责展示数据，是模型的可视化表现，即我们写的template模板（HTML+Vue指令），不处理业务逻辑，仅接收用户输入并同步到ViewModel。
ViewModel（视图模型） ：Vue实例本身就是ViewModel，是Model和View之间的桥梁，核心作用有两个：一是将Model的数据同步到View（数据驱动视图，如data变化后视图自动更新）；二是将View的用户操作同步到Model（视图驱动数据，如输入框输入后data自动更新）。

Vue中的实操体现

Vue并未完全严格遵循MVVM（严格MVVM要求View与Model绝对不能直接通信），但核心思想完全契合——Vue允许通过 $refs直接操作DOM（View）、通过this.$ data直接修改Model，是为了灵活性的设计取舍，核心仍围绕ViewModel实现双向绑定。

<!-- View：视图层，展示数据并接收用户输入 -->
<template>
  <div>
    <input v-model="message" /&gt; <!-- 视图与数据双向绑定 -->
    <p>{{ message }}&lt;/p&gt; <!-- 数据同步到视图 -->
  </div>
</template>

<script setup>
// Model：数据层，管理应用数据
const message = ref('Hello Vue'); // 响应式数据（Model）
// ViewModel：Vue实例（setup语法糖背后的Vue实例），实现双向绑定
// 无需手动操作DOM，ViewModel自动同步数据与视图
</script>

核心作用

让开发者无需手动操作DOM，只需关注数据逻辑，ViewModel自动完成数据与视图的同步，极大简化开发，降低View与Model的耦合度，契合现代前端“数据驱动”的开发理念，也是Vue上手简单的核心原因之一。

二、观察者模式（响应式系统的核心）

观察者模式（也叫发布-订阅模式）是Vue响应式系统（ref、reactive、computed、watch）的底层核心，核心逻辑是“一个被观察对象（发布者），多个观察者（订阅者），当被观察对象变化时，自动通知所有观察者执行更新”。

Vue中的实现逻辑（源码简化思路）

Vue2通过Object.defineProperty劫持数据的getter/setter，Vue3通过Proxy代理数据，本质都是为了实现“数据变化时自动通知更新”，核心分为3步：

初始化响应式数据时，劫持数据的“读取”和“修改”操作（getter中收集依赖，setter中触发更新）；
当组件渲染、computed计算、watch监听时，会将对应的更新函数（观察者）注册到被观察数据（发布者）的订阅列表中；
当数据被修改时（触发setter），发布者会遍历订阅列表，通知所有观察者执行更新（如组件重新渲染、computed重新计算、watch回调执行）。

Vue中的实操体现

我们日常使用的ref、reactive、watch、computed，本质都是观察者模式的应用，无需手动实现发布-订阅逻辑，Vue已封装完成：

<script setup>
import { ref, watch, computed } from 'vue'

// 发布者：响应式数据（被观察对象）
const count = ref(0);

// 观察者1：watch回调（数据变化时执行）
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变成${newVal}`);
});

// 观察者2：computed计算属性（数据变化时重新计算）
const doubleCount = computed(() => count.value * 2);

// 修改发布者数据，自动通知所有观察者更新
const add = () => count.value++;
</script>

核心作用

实现Vue的响应式特性，让数据变化能够自动驱动视图更新、逻辑执行，是ref、reactive、computed、watch等核心API的底层支撑，也是“数据驱动视图”的核心实现方式。

三、单例模式（全局实例/组件的复用）

单例模式的核心是“一个类/对象只能创建一个实例，全局唯一，避免重复创建造成的资源浪费”，Vue中多个核心场景均用到单例模式，尤其适合全局共享的实例或组件。

Vue中的高频应用场景

Vue应用实例：一个Vue项目中，通过createApp（Vue3）或new Vue（Vue2）创建的应用实例是单例的，全局唯一，所有组件都挂载在这个实例上，避免多个应用实例冲突。 // Vue3：创建单例应用实例 `` import { createApp } from 'vue' `` import App from './App.vue' `` const app = createApp(App); // 全局唯一实例 `` app.mount('#app'); ```` // 多次调用createApp(App)会创建新实例，开发中禁止这样做（避免冲突） ``const app2 = createApp(App); // 不推荐，会导致多个实例冲突
Pinia/Vuex仓库：Vuex的Store、Pinia的defineStore，本质都是单例模式——一个应用中，同一个仓库只能有一个实例，确保全局状态的一致性，避免多个状态仓库造成的数据混乱。Vuex源码中通过install方法保证一个Vue实例只会安装一次Vuex插件，从而确保Store单例。
全局UI组件：如Element UI/Plus的Message、Loading组件，调用时始终是同一个实例（如多次调用this.$message，不会创建多个弹窗，而是复用或更新现有实例），避免页面出现多个重复弹窗，提升用户体验。

四、工厂模式（组件/实例的批量创建）

工厂模式的核心是“通过一个统一的工厂函数/类，根据传入参数，创建不同类型的实例/组件，隐藏创建细节，降低耦合”，Vue中大量用于批量创建相似对象或组件，简化创建逻辑。

Vue中的高频应用场景

虚拟DOM（VNode）创建：Vue的虚拟DOM核心是VNode（虚拟节点），Vue通过createVNode工厂函数，根据传入的标签名、组件对象、属性等参数，批量创建不同类型的VNode（如元素节点、组件节点、文本节点），开发者无需关注VNode的底层创建细节，只需调用API即可。 // Vue3 工厂函数创建VNode（简化示例） `` import { createVNode } from 'vue' ```` // 根据传入参数，创建不同类型的VNode（工厂模式） `` const vnode1 = createVNode('div', { class: 'box' }, '文本内容'); // 元素节点 ``const vnode2 = createVNode(MyComponent, { props: { id: 1 } }); // 组件节点
组件注册与创建：Vue的component方法（全局注册组件）、Vue.extend（创建组件构造器），本质都是工厂模式——通过统一的API，根据传入的组件选项，创建并注册组件实例，批量复用组件创建逻辑。
路由实例创建：Vue Router中，通过createRouter工厂函数，根据传入的路由配置（routes），创建唯一的路由实例，隐藏路由实例的创建细节，简化路由配置流程。

五、代理模式（响应式代理+权限控制）

代理模式的核心是“为目标对象创建一个代理对象，通过代理对象控制对目标对象的访问，可在访问前后添加额外逻辑（如拦截、权限校验）”，Vue3的响应式系统、组件通信中的 $attrs/$ listeners，均用到了代理模式。

Vue中的高频应用场景

Vue3响应式代理（Proxy） ：Vue3放弃了Vue2的Object.defineProperty，改用Proxy创建响应式对象，Proxy就是典型的代理模式——Proxy作为目标对象（data）的代理，拦截目标对象的读取、修改、删除等操作，实现依赖收集和更新触发，同时不修改目标对象本身。 // Vue3响应式的核心（Proxy代理模式，简化源码） `` function reactive(obj) { `` // 代理目标对象obj，控制对obj的访问 `` return new Proxy(obj, { `` get(target, key) { `` // 访问时收集依赖（额外逻辑） `` track(target, key); `` return Reflect.get(target, key); `` }, `` set(target, key, value) { `` // 修改时触发更新（额外逻辑） `` const result = Reflect.set(target, key, value); `` trigger(target, key); `` return result; `` } `` }); `` } ```` // 使用：通过代理对象访问目标对象，无需直接操作obj `` const obj = reactive({ name: 'Vue' }); ``obj.name = 'Vue3'; // 触发Proxy的set拦截器
组件通信中的代理：Vue中的 $attrs、$ listeners，本质是代理模式—— $attrs代理了父组件传递的、未被子组件props接收的属性，$ listeners代理了父组件传递的事件，子组件通过代理对象访问父组件的属性和事件，无需直接操作父组件实例，降低组件耦合。
拦截器应用：在Vue项目中，Axios拦截器（请求拦截、响应拦截）也是代理模式的延伸——拦截器作为请求/响应的代理，在请求发送前、响应接收后添加额外逻辑（如Token校验、错误处理），控制请求/响应的访问流程。

六、装饰器模式（逻辑复用+功能扩展）

装饰器模式的核心是“动态地给一个对象添加额外的职责，不改变对象本身的结构，实现功能扩展和逻辑复用”，Vue中的Mixin、指令、插件，均是装饰器模式的典型应用。

Vue中的高频应用场景

Mixin（混入） ：Mixin是Vue中实现逻辑复用的核心方式，本质是装饰器模式——将多个组件的公共逻辑（data、methods、生命周期钩子）提取到一个Mixin对象中，组件引入Mixin后，会被动态添加Mixin中的逻辑，无需修改组件本身，实现功能扩展。 <script> `` // 定义Mixin（装饰器，包含公共逻辑） `` const logMixin = { `` created() { `` console.log('组件创建完成'); `` }, `` methods: { `` log(msg) { `` console.log(msg); `` } `` } `` }; ```` // 组件引入Mixin，动态添加公共逻辑（装饰） `` export default { `` mixins: [logMixin], // 装饰器模式：给组件添加额外职责 `` created() { `` this.log('当前组件：Home'); `` } `` }; ``</script>
Vue指令：Vue的自定义指令（如v-model、v-show、自定义指令v-focus），本质是装饰器模式——指令给DOM元素添加额外的行为（如v-focus自动聚焦、v-show控制显示隐藏），不改变DOM元素本身的结构，仅扩展其功能。
Vue插件：Vue的插件（如Vue Router、Pinia），通过app.use()安装后，会给Vue应用实例添加额外的全局功能（如全局组件、全局方法、原型方法），也是装饰器模式的应用——不修改Vue实例本身，动态扩展其职责。

七、Vue中设计模式的核心总结

Vue中的设计模式，并非孤立存在，而是相互配合、支撑Vue的核心特性，核心总结如下：

核心架构：MVVM模式，奠定“数据驱动视图”的基础，是Vue的整体设计思路；
响应式核心：观察者模式，支撑ref、reactive、computed、watch等API的实现；
全局复用：单例模式，确保全局应用实例、状态仓库、全局组件的唯一性；
批量创建：工厂模式，简化VNode、组件、路由实例的创建逻辑；
权限/拦截：代理模式，实现响应式代理、组件通信代理、请求拦截；
逻辑复用：装饰器模式，通过Mixin、指令、插件扩展组件和应用功能。

理解这些设计模式，不仅能更熟练地使用Vue的核心API，还能看懂Vue源码的核心逻辑，在开发中也能借鉴这些模式，写出更简洁、可维护、可复用的Vue代码（如用工厂模式批量创建组件，用装饰器模式复用公共逻辑）。