前端框架中的设计模式｜青训营设计模式（Design Pattern）是一些解决问题的常用方案。这些方案是众多开发者共

设计模式（Design Pattern）是一些解决问题的常用方案。这些方案是众多开发者共同总结的经验，学习这些方案往往能给开发人员在某些方面带来一些启发。在这篇文章中，我们希望尝试对前端框架中的设计模式进行一定分析，以此辅助我们对前端框架的学习。

MVVM，即 Model-View-ViewModel，是一种软件设计模式。其主要思想是在开发时分离“模型”（Model）和“视图”（View），而在应用时通过 ViewModel 将模型和视图结合应用。

Vue 是一个典型的 MVVM 设计模式驱动的前端框架。虽然新版本的文档中没有直接提及，但在较早的版本中，Vue确实被定义为 MVVM 模式中的 ViewModel，且其精神一直延续至今。

下方是来自 Vue.js 文档的一个简单程序示例。

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

其中，JavaScript 中的内容即为软件的模型，其包含了软件运行的逻辑与所需的数据。模板中的内容则是软件的视图，包含了数据的呈现方式。

React 也是一个优秀的前端框架，其文档中总结了许多优秀的设计原则（Design Principles），来说明 React 做些什么以及不会做什么。在 React 设计原则中，我们能够看到许多与 Vue 不同的点。

React 的组件被描述为一个个函数，这与 Vue 通过 XML 描述组件的方式不同。对于 React，数据、对数据的操作以及界面的关系更加密切了。虽然有 JSX 的写法可以用类似 HTML 的方式描述一个组件，但其最终还是会被编译为 JavaScript。

React 的数据流向是单向的，也就意味着往往只有组件的方法能修改组件的内容。而 Vue 支持数据的双向绑定。这使得软件获取用户的输入更加容易。

各种前端框架的设计模式可能不同，实现类似的功能需要做的努力也会有所差异。开发者可以选择自己熟悉的框架，用自己常用的方式实现需要的功能。

前端框架中的设计模式 ｜ 青训营