当前位置：首页 > news >正文

Vue设计模式到底多少种？

news 2025/9/18 20:06:15

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

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

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