聊城门户网站,小型电商平台,国家建设部查询网站,上海市建设安全协会网站王夑晟Vue设计模式到底多少种#xff1f; 很多同学问#xff0c;Vue到底有多少种设计模式#xff1f;#xff1f;各个模式到底是什么意思#xff1f;#xff1f;又各自适合什么场景#xff1f;#xff1f;
这里我给大家直接说下#xff0c;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);}}
});// 在组件中使用
templatediv{{ count }}/divbutton clickincrementIncrement/button
/templatescript
import { mapState, mapActions } from vuex;export default {computed: {...mapState([count])},methods: {...mapActions([increment])}
};
/script二、函数式组件 模式解释
无状态、无实例的组件实现方式通过纯函数渲染视图它们仅依赖于传入的props来渲染内容, 具有更高的渲染性能和更简洁的代码结构。
使用场景
静态展示型组件高阶组件HOC性能敏感型列表项工具类展示组件
代码示例
// FunctionalComponent.vue
template functionaldiv{{ props.message }}/div
/templatescript
export default {functional: true,props: {message: {type: String,required: true}}
};
/script// 在父组件中使用
templateFunctionalComponent messageHello, World! /
/templatescript
import FunctionalComponent from ./FunctionalComponent.vue;export default {components: {FunctionalComponent}
};
/script三、组合模式逻辑复用 模式解释 组合模式简单解释就是一个页面比较复杂需要好几个组件组合形成这个页面 即组合模式允许你将对象组合成树形结构来表现“整体/部分”的层次结构。在Vue中这通常通过组件的嵌套和组合来实现。
使用场景
复杂业务逻辑封装跨组件功能复用第三方库集成表单验证逻辑
当你需要构建一个复杂的UI界面且这个界面可以由多个小组件组合而成时组合模式是一个有效的选择。
代码示例组合式函数
// ParentComponent.vue
templatedivChildComponent1 /ChildComponent2 //div
/templatescript
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 ./withLoggerexport 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()}
}// 动态组件使用
templatecomponent :iscurrentComponent /
/templatescript
import componentFactory from ./componentFactoryexport 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 ./apiProxyexport 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.currentPagereturn { value: data, done: false }}}}
}// 使用示例
const iterator new PaginationIterator(apiDataSource, 20)for await (const page of iterator) {renderTable(page)
}最后我整理一个对比表格 模式名称类型优缺点适用场景单例模式创建型优点保证唯一实例减少内存开销避免重复初始化。缺点容易造成全局状态增加系统复杂性难以测试。资源管理器、日志系统、数据库连接池等。函数式组件Vue特有优点无状态、无实例性能高适合简单展示型组件。缺点无法维护状态或处理复杂逻辑。简单展示型组件、高频率更新的组件、递归组件、辅助性组件以及需要性能优化的场景。组合模式结构型优点清楚地定义分层次的复杂对象忽略层次差异简化客户端代码。缺点限制类型时比较复杂使设计变得更加抽象。希望客户端可以忽略组合对象与单个对象的差异处理树形结构如文件系统等。策略模式行为型优点算法可以自由切换避免使用多重条件判断扩展性良好维护性好。缺点客户端需要知道所有的策略类增加了对象的数目增加了系统的复杂性。多个类只区别在表现行为上算法的使用环境不应该包含算法逻辑如排序算法、支付方式、折扣计算等。观察者模式行为型优点抽象耦合支持广播通信容易扩展观察者和被观察者。缺点观察者之间细节依赖过多会增加时间消耗和程序的复杂程度需要避免循环调用。关联行为场景建立一套触发机制如用户关注商品降价通知等。装饰者模式结构型优点扩展灵活可以对装饰类进行各种排列组合符合开闭原则。缺点需要编写更多的代码生成更多的类增加了程序的复杂性动态/多层装饰时程序更复杂。为一个类扩展功能为其添加额外的职责如动态添加和撤销功能等。工厂模式创建型优点一个调用者想创建一个对象只要知道其名称就可以了扩展性高。缺点每次增加一个产品时都需要增加一个具体类和对象实现工厂使得系统中类的个数成倍增加增加了系统的复杂度。工厂类负责创建的对象比较少客户端只知道传入工厂类的参数对如何创建对象不关心。代理模式结构型优点分离目标对象降低耦合保护目标对象增强目标对象的功能。缺点类个数增加系统的复杂度增加性能降低。保护目标对象增强目标对象的功能如租客通过中介找房东租房子等。迭代器模式行为型优点分离了集合对象的遍历行为抽象出了迭代器负责集合对象的遍历让外部的代码透明的访问集合内部的数据。缺点类的个数成对增加增加了系统复杂性。访问集合对象的内容无需暴露内部表示为遍历不同的集合结构提供统一接口。 看到这里的小伙伴欢迎点赞、评论收藏
如有前端相关疑问博主会在第一时间解答也同样欢迎添加博主好友共同进步
