vue3中,使用23种设计模式

一、创建类
1.单例模式:使用Vue3的Vue实例来创建全局的单例。Loading只能有一个。
2.原型模式:使用Vue3的原型继承来实现原型模式。
3.工厂模式(简单):使用Vue3的构造函数或者工厂函数来创建组件实例。
4.工厂模式(抽象):使用Vue3的构造函数或者工厂函数来创建组件实例。
5.建造者模式:使用Vue3的组件选项来实现建造者模式。

二、结构类
6.桥接模式
7.组合模式:vue3 composition API
8.享元模式:使用Vue3的组件缓存来实现享元模式。
9.外观模式:使用Vue3的组件来实现外观模式。
10.代理模式:使用Vue3的proxy对象来实现数据的代理。
11.装饰器模式:使用Vue3的装饰器来增强类或者函数的功能。
12.适配器模式:使用Vue3的provide和inject来实现适配器模式。

三、行为类
行为型模式分为类行为模式和对象行为模式,类的行为模式采用继承机制在子类和父类之间分配行为,对象行为模式采用多态等方式来分配子类和父类的职责。
13.观察者模式:使用Vue3的$watch方法来监听数据的变化。vue2的Object.defineProperty()
14.模板方法模式:使用Vue3的render函数来实现模板方法模式。模块模式:使用Vue3的import和export语法来实现模块化。
15.职责链模式:使用Vue3的事件总线来实现责任链模式。
16.命令模式:
17.状态模式:使用Vue3的状态管理库(如Vuex)来实现状态模式。

18.备忘录模式:
19.迭代器模式:使用Vue3的for…of循环来实现迭代器模式。
20.访问者模式:
21.中介者模式:
22.解释器模式:
23.策略模式:使用Vue3的mixins来实现策略模式。

其他:
24.发布/订阅模式(Pub/Sub Pattern):Vue 和react中使用了 Vuex ,pinia、redux、atom状态管理来同步和更新数据,其中也应用了发布/订阅模式。发布订阅模式允许事件发生的方式有很多种,可以是主动发出事件,也可以是被某个事件触发。
发布订阅和观察者模式区别,发布订阅是解耦的2个独立的模块,有事件流。

25.防抖节流模式。
防抖:一定时间内只执行一次。如滚动事件
节流:最后执行时间的时间延迟,且固定。如Input输入文字,延迟自动执行

26.规则模式:使用Vue3的条件渲染和v-if指令来实现规则模式。

以上就是Vue3中常见的设计模式,但是实际上,Vue3的设计模式远不止这些,Vue3的灵活性和可扩展性使得我们可以根据实际需求来实现各种设计模式。


vue2
Vue.js 2的设计模式主要有以下几种:

工厂模式(Factory Pattern):在 Vue 中,我们经常使用工厂模式来创建复杂对象。例如,使用 Vue.extend() 方法来创建组件实例。
原型继承(Prototype Inheritance):Vue 组件可以使用原型继承来扩展或修改其父组件的功能。
策略模式(Strategy Pattern):在 Vue 中,我们经常需要切换不同的样式或行为,这时候就可以使用策略模式。
装饰器模式(Decorator Pattern):装饰器模式是在不修改原有类的基础上增加新的功能,Vue 中的 slot 和 prop 使用了装饰器模式。
访问者模式(Visitor Pattern):访问者模式在 Vue 中用于访问和修改数据结构中的元素而不改变原有数据结构。
迭代器模式(Iterator Pattern):在 Vue 中,使用 v-for 指令时,就可以用到迭代器模式。
空对象操作(Null Object Pattern):在 Vue 中,我们可以使用空对象模式来代替真实对象进行操作。
命令模式(Command Pattern):在 Vue 中,可以通过命令模式封装一系列的操作命令,从而解耦系统中的不同部分。
模板模式(Template Syntax):Vue.js是基于模板的,因此它充分利用了模板语法,如插值、条件逻辑和循环等。
备忘录模式(Memento Pattern):在Vue中,我们可以使用备忘录模式来保存和恢复组件的状态。
状态机模式(State Machine Pattern):Vue的状态管理是基于Vuex的,它使用状态机模式来管理状态的变化。
代理模式(Proxy Pattern):在Vue中,可以使用代理模式来实现组件的加载和卸载。
模态对话框模式(Modal Dialog Pattern):在单页面应用中,可以使用模态对话框模式来创建一个小的对话框,用于展示额外的信息或选项。
迭代扩展模式(Iterative Extensions Pattern):在开发过程中,我们可以使用迭代扩展模式来逐步完善和优化代码。
装饰器装饰模式(Decorator Decorator Pattern):在Vue中,我们经常使用装饰器装饰器来扩展或修改组件的功能。
策略接口模式(Strategy Interface Pattern):在Vue中,可以通过策略接口模式来实现不同的策略,例如数据渲染策略或事件处理策略。
外观模式(Facade Pattern):在大型应用中,可以使用外观模式来提供一个统一的接口,用于访问子系统中的一组接口。
建造者模式(Builder Pattern):在Vue中,可以使用建造者模式来创建复杂对象,特别是当对象的创建需要多个步骤时。
监听器模式(Listener Pattern):在Vue中,监听器模式被广泛使用来监听DOM事件,以便于触发相应的行为。
观察者发布订阅模式(Observer/Pub/Sub Pattern):在Vue中,我们可以通过发布/订阅模式来实现组件之间的通信。
原型继承(Prototype Inheritance with Composition):在Vue中,我们也可以使用原型继承和组合来实现组件的继承和扩展。
这些设计模式在Vue.js的开发过程中被广泛应用,可以帮助开发者更好地理解Vue.js的设计理念和实现方式。

参考:
https://blog.csdn.net/qq_41581588/article/details/134801908

https://blog.csdn.net/hkduan/article/details/113830356

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值