理解前端Vue中的MVVM和React的MVC

	前端JS框架中有些是MVC设计模式,有些是MVVM设计模式，那前端中的这些设计模式和后端的MVC设计模式有什么关系呢？
	本人查阅大量文章发现，前端中MVC或者MVVM可以这么理解：借鉴了后端MVC思想把V层进行了更加详细的划分。

• 我们先来看一下后端的MVC设计模式

  M: model 数据模型层 提供数据
  V: view 视图层 显示页面
  C: controller 控制层 调用数据渲染视图
  
  MVC设计模式的出现，在一定程度上依赖于另外一项关键技术的成熟，就是模板引擎；就是前端HTML中写关键字符以期承载数据，然后再交由后台将前端HTML代码中的关键字符进行正则匹配，替换为真实数据；它没有从正真意义上实现前后端的分离，而是浅层次的实现了前后端工程上的分离，也就是后台程序员不写页面代码而已；但在MVC的发展道路上，也有人试图突破这种模式实现真正的前后端分离，不使用模板引擎，从服务器获取静态页面后，使用大量的ajax获取数据并更新到页面，这种做法，确实实现了前后端工程及数据的彻底分离，为前端工程化的发展提供了关键性思路设想，而它最大的BUG就是需要前端程序员大量且繁琐的操作DOM已向用户展示数据，痛苦不堪，虽然 jQuery 从一定程度上减缓了这种痛苦，但这并不是MVVM，所以 jQuery 也不是终点，但这种设计是对前端工程化发展具有历史性意义的……

• 下面我们来看这幅图

M：model 数据模块层 提供数据
V：view 视图层 渲染数据
VM： ViewModel 视图模型层 调用数据，渲染视图
本质上就是解决了前端程序员大量繁琐的操作DOM的问题，数据的请求获取依然依赖于Ajax技术，但是数据获取后的展示，不再是操作DOM，而是交由中间的VM层来处理，真正意义上实现了前后端分离。

Vue中的MVVM和React的MVC

Vue中的MVVM (双向数据绑定)
M（模型层，主要负责业务数据相关） V（视图层，顾名思义，负责视图相关） VM（ViewModel，V与M连接的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点）
也就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互绑定；

<template>
<!-- View层 -->
  <div>
    <span>{{text}}</span>
    <input type="text" v-model="text">
    <!-- v-model就是实现了view控制Model数据的改变 -->
    <!-- <input :value="text" @input="text = $event.target.value" />  -->
  </div>
</template>
<script>
// Vue内置实现的是ViewModel层
// -----监听数据的改变（Vue2.0 defineProperty/vue3.0 Proxy）
export default {
  data(){
    // Model层
    return {
      text:'哈哈'
    };
  },
  mounted(){
      setTimeout(_=>{
        this.text='改变数据'
      },1000)
  }
}
</script>

React的MVC（默认是单向数据流，但是我们可以自己实现双向绑定）
M(model 数据模型层 ) V（view 视图层 ） C（controller 控制层 ）
主要实现通过控制层监听model的变化，数据变化后通过controller 控制层 来实现view层的渲染。

class Test extends React.Component {
  // Model层
  constructor(){
    super()
    this.state = {
      text:'哈哈'
    }
  }
  render(){
      /* View层 (React基于JSX创建视图层，Vue一般基于template创建视图层)*/
      return <div>
          内容：<span>{this.state.text}</span>
          <br>
          <input type="text" value={this.state.text} onChange={this.handle}/>
      </div>;
  }
  handle=(ev)=>{
    this.setState({
      text:ev.target.value
    })
  }
  componentDidMount(){
    // 通过修改数据实现视图的重新渲染
    setTimeout(_=>{
      this.setState({
        text:'改变数据'
      })
    },1000)
  }
}

ReactDOM.render(<>
  <Test></Test>
</>,document.getElementById('root'))

Vue vs React

1、都是操作数据来影响视图的，告别了传统操作DOM的时代

Model控制View层
-Vue基于数据劫持,拦截到最新的数据，从而重新渲染视图
-React是提供对应的API,通过我们操做API，让最新数据渲染视图

2、都一定存在DOM的差异化（DOM DIFF）

每次数据更改，只把需要改变的视图部分进行重新渲染

3、React默认只实现了单向控制（只有数据影响视图），而Vue基于v-model实现了双向控制（即也包含了视图影响数据）

不论是vue还是React,在实现视图影响数据的方式上，也都是基于change/input事件，监听表单元素内容的改变，从而去修改数据，达到数据的更新