一平常在阅读源码中,见到Vue或者React源码中有应用那些设计模式?

在阅读Vue和React这类现代前端框架的源码时，会发现它们广泛采用了多种设计模式来实现框架的核心功能和提升代码的结构与可维护性。以下是一些常见的设计模式及其在Vue和React源码中的应用示例：

1.1 Vue.js中的设计模式

观察者模式（Observer）
- 应用：Vue的核心响应式系统依赖于观察者模式，通过追踪数据变化并在变化时通知视图更新。Vue使用这个模式来实现数据绑定，当数据模型发生变化时自动更新视图。
发布-订阅模式（Publish-Subscribe）
- 应用：Vue的事件系统和组件间通信机制（如$emit, props, 和 $on）实质上是一种发布-订阅模式，允许组件发布事件和订阅其他组件的事件。
单例模式（Singleton）
- 应用：Vue实例本身在每个Vue应用中通常是单例的，特别是对于Vue CLI创建的应用，全局只存在一个Vue实例来管理整个应用的状态和生命周期。
工厂模式（Factory）
- 应用：Vue的组件可以通过工厂函数的方式创建，比如在使用render函数时，可以根据条件动态创建组件实例。
策略模式（Strategy）
- 应用：Vue的插件系统可以视为策略模式的应用，插件可以提供不同的功能（策略），开发者可以根据需求选择性地使用插件来改变Vue的行为。

组件模式（Component Pattern）
- 应用：React最基础的设计模式就是组件化，通过将UI拆分成可复用的组件树，每个组件负责自己的状态和渲染逻辑，这体现了高内聚低耦合的原则。
纯函数组件（Pure Function Components）
- 应用：React鼓励使用无副作用的纯函数组件，这是一种函数式编程的思想，有利于代码的测试和优化。
高阶组件（Higher-Order Components, HOC）
- 应用：HOC是一种函数，接受一个组件并返回一个新的组件，通常用于重用组件逻辑或修改props。这是一种装饰器模式的应用。
状态提升（Lifting State Up）
- 应用：当多个组件需要共享状态时，React推荐将状态提升到最近的共同父组件中管理，这是设计模式中的一种分治思想。
容器与展示组件分离（Container and Presentational Components）
- 应用：这是一种架构模式，容器组件处理数据逻辑和状态管理，而展示组件负责UI呈现，这有助于代码的清晰和可维护性。
观察者模式（Observer）
- 应用：虽然不如Vue那样明显，但在React中通过React的setState方法和Context API，也可以观察到类似观察者模式的机制，用于状态变化后自动更新UI。

这些设计模式的运用展示了Vue和React框架在架构设计上的深度和灵活性，帮助开发者构建复杂且可维护的前端应用。