前端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事件,监听表单元素内容的改变,从而去修改数据,达到数据的更新

Logo

前往低代码交流专区

更多推荐