理解MVVM在react、vue中的使用

理解MVVM在react、vue中的使用

一：什么是MVC、为何不用MVC

1：MVC的含义：

• M（modal）：是应用程序中处理数据逻辑的部分。
• V （view）  ：是应用程序中数据显示的部分。
• C（controller）：是应用程序中处理用户交互的地方（Controller是MVC中的数据和视图的协调者，也就是在Controller里面把Model的数据赋值给View来显示（或者是View接收用户输入的数据而后由Controller把这些数据传给Model来保存到本地或者上传到服务器））

M-V-C之间的关系能够用下面这张图直观展现

 

 

 2： 传统的web开发时如何实现MVC模式的

若是前端没有框架，只使用原生的html+js，MVC模式能够这样理解。将html当作view;js当作controller，负责处理用户与应用的交互，响应对view的操做（对事件的监听），调用Model对数据进行操做，完成model与view的同步（根据model的改变，经过选择器对view进行操做）;将js的ajax当作Model，也就是数据层，经过ajax从服务器获取数据（按照上面这种方式分层，感受多少有点强行MVC，由于Model层被弱化了）。

3：MVC模式有什么缺点

• 对 DOM 操做的代价很是高
• 程序运行缓慢且效率低下
• 内存浪费严重
• 应用程序复杂性高，难以分工开发。
  
  

二：什么是MVVM，MVVM的优势

1:什么是MVVM：

• M（modal）：模型，定义数据结构。
• C（controller）：实现业务逻辑，数据的增删改查。在MVVM模式中通常把C层算在M层中，（只有在理想的双向绑定模式下，Controller 才会彻底的消失。这种理想状态通常不存在）。
• VM（viewModal）：视图View的模型、映射和显示逻辑（如if for等，非业务逻辑），另外绑定器也在此层。ViewModel是基于视图开发的一套模型，若是你的应用是给盲人用的，那么也能够开发一套基于Audio的模型AudioModel。
• V（view） ：将ViewModel经过特定的GUI展现出来，并在GUI控件上绑定视图交互事件，V(iew)通常由MVVM框架自动生成在浏览器中。

·2：MVVM的优势：

MVVM比MVC精简不少，不只简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操做DOM元素。由于在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提升代码的可重用性

 

三：MVVM的双绑和单绑区别：

• 通常只有UI表单控件才存在双向数据绑定，非UI表单控件只有单向数据绑定。
• 单向数据绑定是指：M的变化能够自动更新到ViewModel，但ViewModel的变化须要手动更新到M（经过给表单控件设置事件监听）
• 双向数据绑定是指念：M的变化能够自动更新到ViewModel，ViewModel的变化也能够自动更新到M
• 双向绑定 = 单向绑定 + UI事件监听。双向和单向只不过是框架封装程度上的差别，本质上二者是能够相互转换的。

优缺点：在表单交互较多的状况下，单向数据绑定的优势是数据更易于跟踪管理和维护，缺点是代码量较多比较啰嗦，双向数据绑定的优缺点和单向绑定正好相反。

 

四：MVVM模式在react和vue中的对应关系

1：MVVM模式在react中的对应关系

•  M(odel)：对应组件的方法或生命周期函数中实现的业务逻辑和this.state中保存的本地数据，若是React集成了redux +react-redux，那么组件中的业务逻辑和本地数据能够彻底被解耦出来单独存放当作M层，如业务逻辑放在Reducer和Action中。
•  V(iew)-M(odel)：对应组件中的JSX，它实质上是Virtual DOM的语法糖。React负责维护 Virtual DOM以及对其进行diff运算，而React-dom 会把Virtual DOM渲染成浏览器中的真实DOM
•  View：对应框架在浏览器中基于虚拟DOM生成的真实DOM（并不须要咱们本身书写）以及咱们书写的CSS
• 绑定器：对应JSX中的命令以及绑定的数据，如className={ this.props.xxx }、{this.props.xxx}等等
  
  

2：MVVM模式在vue中的对应关系