【ms】Vue和 React

ms

Vue 和 react 的区别：
同：
它们都用到Virtual DOM，是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
原文链接：http://caibaojian.com/vue-vs-react.html
1.渲染的时候不同：
Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。·
而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化

2.创建项目不同：
它们的手脚架不同，react   create-react-app，vue   vue-cli

3.最大的区别：
3.1 它们模板之间的书写，vue  template  ，react  jsx语法
Vue默认使用template语法（可以转换成render函数），更加趋向于html写法
React 默认使用javascript来进行页面的书写，赋予了开发者更大的编程空间

3.2它们状态管理和对象属性
Vue中，数据默认有实例的data属性统一管理，
React中，数据默认由实例的state属性统一管理
Vue可以实现数据双向绑定，react是单向数据流的，需要自己拿到数据再重新设置回去

Mvc和Mvvm的区别：
MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。
- MVC中Controller演变成MVVM中的ViewModel
-MVVM通过数据来显示视图层而不是节点操作
-MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

mvvm

Mvc的弊端：
1.model层和view层不能直接通信，
2.所有的业务逻辑都在controller里面进行，
3.Dom操作降低性能，
4.当 Model 频繁发生变化，需要主动更新到View ；当用户的操作导致数据发生变化，同样需要将变化的数据同步到Model中，维护困难
MVVM的特点：
1.核心是在提供model和view层的数据双向绑定上，view和model并未直接联系，而是通过ViewModel进行交互

VueModel双向数据绑定的原理：
1. 核心点:Object.defineProperty
2. 默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作。

axihe

浅谈MVC模式与MVVM模式的区别
MVC模式：

　　M：Model（数据模型），用于存放数据
　　V：View（视图），也就是用户界面
　　C：Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。Controller可以直接与Model和View进行通信，而View不能与Controller直接通信。，当有数据更新时，Model也要与Controller进行通信，这个时候就要用Notification和KVO，这个方式就像发广播一样，Model发信号，Controller设置接收监听信号，当有数据更新是就发信号给Controller，Model和View不能直接通信，这样违背MVC设计原则。View与Controller通信需要利用代理协议的方式，Controller可以直接根据Model决定View的展示。View如果接受响应事件则通过delegate，target-action，block等方式告诉Controller的状态变化。Controller进行业务的处理，然后再控制View的展示。



　　MVC：
　　　　Controller负责将Model的数据用View显示出来
　　　　用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）

　　缺点：1.所有业务逻辑都在Controller里操作，逻辑复杂且不利于维护，
　　　　　2.大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
　　　　    3.当 Model 频繁发生变化，需要主动更新到View ；当用户的操作导致Model发生变化，同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。


由于MVC模式的缺陷，MVC的变种模式衍生出MVVM模式

MVVM模式：
　　核心是提供对View 和 ViewModel 的双向数据绑定，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。

　　M：Movel（数据模型）
　　V：View
　　VM：ViewModel 是一个同步View 和 Model的对象。View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
　　　　VM双向绑定：在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的，在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。当用户操作 View(视图)，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model(数据) 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。

转自