Vue设计模式到底多少种？

Vue设计模式到底多少种？

很多同学问，Vue到底有多少种设计模式？？各个模式到底是什么意思？？又各自适合什么场景？？

这里我给大家直接说下，Vue的设计模式没有一个固定的数值，设计模式是解决特定问题的经验总结，并非固定清单。不同技术场景、项目复杂度会衍生出不同的模式组合。

那么在这里我给大家总结了9种常用，或者面试过程中经常被提记的设计模式；

一、单例模式：全局状态管理

模式解释

标准解释：
单例模式确保一个类只有一个实例，并提供一个全局访问点。在Vue中常用于全局状态管理，保证应用状态的可控性和一致性。

无脑解释：
单例模式就像是一个全村唯一的广播站” “模式。想象一下，在一个小村子里，只有一个广播站能够发送消息，而且全村的人都能通过这个广播站接收到消息。这个广播站就是单例模式中的那个唯一实例，它提供了全村人访问和获取信息的全局访问点。

在Vue中，如果我们用单例模式来管理全局状态，就像是这个广播站负责播报村子里的各种重要事情，比如天气变化、节日活动安排等。这样，村子里的每个人（即Vue应用的各个组件）都能通过这个广播站（即单例模式的全局访问点）了解到最新的状态，而且保证了这个状态在全村（即整个Vue应用）中是一致的和可控的。

使用场景

• 用户登录状态管理
• 全局配置信息存储
• 应用主题切换控制
• 跨组件数据共享

代码示例（Vuex）

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}}
});// 在组件中使用
<template><div>{{ count }}</div><button @click="increment">Increment</button>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['count'])},methods: {...mapActions(['increment'])}
};
</script>

二、函数式组件

模式解释

无状态、无实例的组件实现方式，通过纯函数渲染视图，它们仅依赖于传入的props来渲染内容, 具有更高的渲染性能和更简洁的代码结构。

使用场景

• 静态展示型组件
• 高阶组件（HOC）
• 性能敏感型列表项
• 工具类展示组件

代码示例

// FunctionalComponent.vue
<template functional><div>{{ props.message }}</div>
</template><script>
export default {functional: true,props: {message: {type: String,required: true}}
};
</script>// 在父组件中使用
<template><FunctionalComponent message="Hello, World!" />
</template><script>
import FunctionalComponent from './FunctionalComponent.vue';export default {components: {FunctionalComponent}
};
</script>

三、组合模式：逻辑复用

模式解释

组合模式简单解释就是：一个页面比较复杂，需要好几个组件组合形成这个页面；
即：组合模式允许你将对象组合成树形结构来表现“整体/部分”的层次结构。在Vue中，这通常通过组件的嵌套和组合来实现。

使用场景

• 复杂业务逻辑封装
• 跨组件功能复用
• 第三方库集成
• 表单验证逻辑

当你需要构建一个复杂的UI界面，且这个界面可以由多个小组件组合而成时，组合模式是一个有效的选择。

代码示例（组合式函数）

// ParentComponent.vue
<template><div><ChildComponent1 /><ChildComponent2 /></div>
</template><script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';export default {components: {ChildComponent1,ChildComponent2}
};
</script>

四、策略模式：行为扩展

模式解释

策略模式通过定义算法家族并使其可互相替换，实现行为的灵活扩展。在Vue中常用于解耦具体算法实现与业务逻辑。

使用场景

• 表单验证规则管理
• 权限验证策略
• 数据处理策略（如不同格式转换）
• 支付方式选择

代码示例（表单验证策略）

// strategies.js
export const validationStrategies = {required: value => !!value?.trim(),email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),minLength: (value, length) => value.length >= parseInt(length)
}// 使用组合式函数封装
export function useValidator() {const validate = (value, rules) => {return rules.every(rule => {const [strategy, param] = rule.split(':')return validationStrategies[strategy](value, param)})}return { validate }
}// 组件中使用
import { useValidator } from './validator'
export default {setup() {const { validate } = useValidator()const checkForm = () => {const isValid = validate(formData.email, ['required', 'email'])// ...}return { checkForm }}
}

五、观察者模式：响应式数据

模式解释

观察者模式定义对象间的一对多依赖关系，当被观察对象状态改变时自动通知所有依赖项。Vue的响应式系统正是该模式的典型实现。

使用场景

• 表单输入双向绑定
• 跨组件状态同步
• 实时数据仪表盘
• 复杂计算依赖跟踪

代码示例（自定义观察者）

// reactive.js
class Dep {constructor() {this.subscribers = new Set()}depend() {if (activeEffect) this.subscribers.add(activeEffect)}notify() {this.subscribers.forEach(effect => effect())}
}let activeEffect = nullfunction watchEffect(effect) {activeEffect = effecteffect()activeEffect = null
}// Vue3响应式原理简化实现
function reactive(obj) {const deps = new Map()return new Proxy(obj, {get(target, key) {let dep = deps.get(key)if (!dep) {dep = new Dep()deps.set(key, dep)}dep.depend()return target[key]},set(target, key, value) {target[key] = valuedeps.get(key)?.notify()return true}})
}// 使用示例
const state = reactive({ count: 0 })watchEffect(() => {console.log(`Count changed: ${state.count}`)
})state.count++ // 触发日志输出

六、装饰者模式：动态添加功能

模式解释

装饰者模式通过包装对象来动态扩展功能，同时保持接口一致性。在Vue中常用于功能增强而不修改组件本身。

使用场景

• 权限控制装饰器
• 日志记录装饰器
• 性能监控装饰器
• UI样式增强

代码示例（高阶组件装饰器）

// withLogger.js
export default function withLogger(WrappedComponent) {return {mounted() {console.log(`Component ${this.$options.name} mounted`)},render(h) {return h(WrappedComponent, {on: {...this.$listeners,click: (...args) => {console.log('Button clicked')this.$emit('click', ...args)}},props: this.$props})}}
}// 使用装饰器
import Button from './Button.vue'
import withLogger from './withLogger'export default withLogger(Button)

七、工厂模式：对象创建

模式解释

工厂模式将对象创建过程封装，根据输入参数返回不同类型对象。在Vue中常用于动态组件创建和复杂对象实例化。

使用场景

• 动态表单组件生成
• 多主题组件切换
• 插件系统初始化
• 异步组件加载

代码示例（组件工厂）

// componentFactory.js
const components = {text: () => import('./TextInput.vue'),select: () => import('./SelectInput.vue'),date: () => import('./DatePicker.vue')
}export default {createComponent(type) {return components[type]?.() || components.text()}
}// 动态组件使用
<template><component :is="currentComponent" />
</template><script>
import componentFactory from './componentFactory'export default {data() {return {fieldType: 'select'}},computed: {currentComponent() {return componentFactory.createComponent(this.fieldType)}}
}
</script>

八、代理模式：控制访问

模式解释

代理模式为对象提供替代品或占位符以控制其访问。Vue中常用于数据校验、缓存控制和访问限制。

使用场景

• 计算属性缓存
• API请求拦截
• 权限控制代理
• 延迟加载优化

代码示例（缓存代理）

// apiProxy.js
const cache = new Map()export default {async fetchData(url) {if (cache.has(url)) {console.log('Return cached data')return cache.get(url)}const response = await fetch(url)const data = await response.json()cache.set(url, data)return data}
}// 使用代理
import apiProxy from './apiProxy'export default {async mounted() {const data = await apiProxy.fetchData('/api/users')// ...}
}

九、迭代器模式：顺序访问

模式解释

迭代器模式提供顺序访问聚合对象元素的方法，而无需暴露其底层实现。Vue中常用于处理集合型数据操作。

使用场景

• 分页数据加载
• 树形结构遍历
• 自定义集合操作
• 数据转换管道

代码示例（自定义迭代器）

// paginationIterator.js
export class PaginationIterator {constructor(dataSource, pageSize = 10) {this.dataSource = dataSourcethis.pageSize = pageSizethis.currentPage = 0}[Symbol.iterator]() {return {next: async () => {const start = this.currentPage * this.pageSizeconst end = start + this.pageSizeconst data = await this.dataSource.fetch(start, end)if (data.length === 0) return { done: true }this.currentPage++return { value: data, done: false }}}}
}// 使用示例
const iterator = new PaginationIterator(apiDataSource, 20)for await (const page of iterator) {renderTable(page)
}

最后我整理一个对比表格

模式名称	类型	优缺点	适用场景
单例模式	创建型	优点：保证唯一实例，减少内存开销，避免重复初始化。 缺点：容易造成全局状态，增加系统复杂性，难以测试。	资源管理器、日志系统、数据库连接池等。
函数式组件	（Vue特有）	优点：无状态、无实例，性能高，适合简单展示型组件。 缺点：无法维护状态或处理复杂逻辑。	简单展示型组件、高频率更新的组件、递归组件、辅助性组件以及需要性能优化的场景。
组合模式	结构型	优点：清楚地定义分层次的复杂对象，忽略层次差异，简化客户端代码。 缺点：限制类型时比较复杂，使设计变得更加抽象。	希望客户端可以忽略组合对象与单个对象的差异，处理树形结构，如文件系统等。
策略模式	行为型	优点：算法可以自由切换，避免使用多重条件判断，扩展性良好，维护性好。 缺点：客户端需要知道所有的策略类，增加了对象的数目，增加了系统的复杂性。	多个类只区别在表现行为上，算法的使用环境不应该包含算法逻辑，如排序算法、支付方式、折扣计算等。
观察者模式	行为型	优点：抽象耦合，支持广播通信，容易扩展观察者和被观察者。 缺点：观察者之间细节依赖过多，会增加时间消耗和程序的复杂程度，需要避免循环调用。	关联行为场景，建立一套触发机制，如用户关注商品降价通知等。
装饰者模式	结构型	优点：扩展灵活，可以对装饰类进行各种排列组合，符合开闭原则。 缺点：需要编写更多的代码，生成更多的类，增加了程序的复杂性，动态/多层装饰时程序更复杂。	为一个类扩展功能，为其添加额外的职责，如动态添加和撤销功能等。
工厂模式	创建型	优点：一个调用者想创建一个对象，只要知道其名称就可以了，扩展性高。 缺点：每次增加一个产品时，都需要增加一个具体类和对象实现工厂，使得系统中类的个数成倍增加，增加了系统的复杂度。	工厂类负责创建的对象比较少，客户端只知道传入工厂类的参数，对如何创建对象不关心。
代理模式	结构型	优点：分离目标对象，降低耦合，保护目标对象，增强目标对象的功能。 缺点：类个数增加，系统的复杂度增加，性能降低。	保护目标对象，增强目标对象的功能，如租客通过中介找房东租房子等。
迭代器模式	行为型	优点：分离了集合对象的遍历行为，抽象出了迭代器负责集合对象的遍历，让外部的代码透明的访问集合内部的数据。 缺点：类的个数成对增加，增加了系统复杂性。	访问集合对象的内容，无需暴露内部表示，为遍历不同的集合结构提供统一接口。

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！