1 描述软件架构与框架之间的区别与联系
架构 architecture，软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。架构是理论性的，是一种设计模式（例如 MVC）。软件架构是一个系统的草图。软件架构描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确和相对细致地描述组件之间的通讯。设计软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。
框架 framework，框架是特定语言和技术的架构应用解决方案，某种应用的半成品，就是一组组件，供你选用完成你自己的系统。框架一般是成熟的，不断升级的软件，可以直接用的工具（例如 .NET）。软件框架是面向领域（如 ERP、计算领域等）的、可复用的“半成品”软件，它实现了该领域的共性部分，并提供了一些定义良好的可变点以保证灵活性和可扩展性。也就是说软件框架是领域分析结果的软件化，是领域内最终应用的模板，是特定语言和技术的架构应用解决方案。
二者的联系在于，框架可以根据架构来设计，比如 Vue 是根据 MVVM 架构设计的前端框架。借用 StackOverflow 的图片（如下），我们可以根据架构（图纸）来用框架（工具）搭建东西。
框架
架构
2 结合我的项目
2.1 绘制三层架构模型图，细致到分区
image
2.2 三层架构给开发者带来的便利
- 开发人员可以只关注整个结构中的其中某一层。在我们的项目中，后台同学可以在约定好接口形式后同时分别进行开发数据库、API接口
- 可以很容易的用新的实现来替换原有层次的实现。我们目前重构了多次代码，但是因为三层架构的设计，各个部分重构的时候只要保持接口不变，就不会影响到其他层
- 扩展性强。不同层负责不同的层面。例如我们的项目中，前端和后台就是分开开发的，只需要约定好接口形式即可，视图层和持久化层分离
- 安全性高。用户端只能通过逻辑层来访问数据层，减少了入口点，把很多危险的系统功能都屏蔽了
3 研究 VUE 与 Flux 状态管理的异同
Flux
简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。
Flux将一个应用分成四个部分。
- View： 视图层
- Action：视图层发出的消息（比如mouseClick）
- Dispatcher：Dispatcher 的作用是将 Action 派发到 Store，执行回调函数
- Store：用来存放应用的状态，一旦发生变动，就提醒 Views 要更新页面
image
Flux 的最大特点，就是数据的"单向流动"。
- 用户访问 View
- View 发出用户的 Action
- Dispatcher 收到 Action，要求 Store 进行相应的更新
- Store 更新后，发出一个"change"事件
- View 收到"change"事件后，更新页面
上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰。
Vuex
由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex。
Vuex 包含以下几个部分
- store：相当于一个容器，它是响应式的在全局都可以使用它；一个应用里只能定义一个 store 容器
- state：这里对象里面放了各种状态（变量）
- mutations：唯一用来修改状态的回调函数，但不支持异步操作
- actions：包含异步操作，提交 mutations 来修改状态
- getters：在组件内部获取 store 中状态的函数
- module：将 store 分割成不同的模块
image
完整的 Vuex 动作是这样的：
- Components dispatch（调用）Actions
- Actions commit 对应的 Mutations
- 只有 Mutations 可以操作 State 中的状态数据，状态一改变，组件中就重新渲染
