描述软件架构与框架之间的区别与联系

区别：

• 架构：软件架构是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为，架构模式是特定领域常见问题的解决方案。软件架构是一个系统的草图，是一系列相关的抽象模式，用于指导大型软件系统各个方面的设计。架构是问题的抽象解决方案，它关注大局而忽略细节。
• 框架：框架是特定语言和技术的架构应用解决方案，是与具体语言和技术相关的。框架集成了代码和多种第三方解决方案，使人聚焦业务逻辑代码而不是技术实现。形象地说，使用软件框架就是将代码放到一个我们看不到的容器中，当我们使用的时候直接调用。框架是通用半成品，必须根据具体需求进一步定制开发才能变成应用系统。

联系：

• 框架是一种或多种架构的组合的实现。
• 软件架构决策涉及如何将软件系统分解成不同的部分、各部分之间的静态结构关系和动态交互关系等，引入软件架构之后，整个开发过程变成了“分两步走”，而架构决策往往会体现在框架之中。
• 框架技术和架构技术的出现，都是为了解决软件系统日益复杂所带来的困难而采取“分而治之”思维的结果。
  

以你的项目为案例

采用三层架构模型，可以使开发人员只关注整个结构中的其中某一层，使结构、分工更加明确，支持并行化开发，提供了隐式的程序复用准则，易于用新的实现代替原有层次的实现，而且在后期维护时，降低了维护成本与维护时间。

研究 VUE 与 Flux 状态管理的异同

• View：视图层
• Action（动作）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux使用数据层保存整个应用的状态，它的角色有点像 MVC 架构之中的Model 。

VUE使用Vuex来管理所有组件状态，每一个Vuex应用就是一个store，在store中包含组件中的共享状态state和改变状态的方法mutations。当开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态的情况，此时就应该考虑使用Vuex，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管在何处改变状态，Vuex都会通知使用该状态的组件做出相应修改。

异：

• Flux数据流的顺序是：View发起Action->Action传递到Dispatcher->Dispatcher将通知Store->Store的状态改变通知View进行改变
• Vuex数据流的顺序是：View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变生成新的state(vue检测到数据变化自动渲染)
• Flux是一种前端状态管理架构思想，专门解决软件的结构问题。基于Flux的设计思想，出现了一批前端状态管理框架，其中包括了Vuex。Vuex是Flux的一个实现。
• 在Vuex中本身就内置State对象，对仓库的管理更加明确。
• Vuex有自动渲染的功能，所以不需要更新。
• Vuex多个组件调用一个状态，将原来组建与组件之间的状态传递改成组件与仓库之间的传递。
  

同：

• 都通过store来存储状态。
• 都提供数据驱动、可组合搭建的视图组件。
• Flux最早提出作为对传统前端MVC的一种改进，Vuex基于Flux并且吸收了它的一些特点。