什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理

什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理

Mvvm定义

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型

  • 【模型】指的是后端传递的数据。
  • 【视图】指的是所看到的页面。
  • 【视图模型】mvvm模式的核心,它是连接view和model的桥梁。

它有两个方向:

  • 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
  • 二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。

这两个方向都实现的,称之为数据的双向绑定。

总结: 在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下:
什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理_第1张图片

MVC的定义

MVC是Model-View- Controller的简写。即模型-视图-控制器

  • M和V指的意思和MVVM中的M和V意思一样。
  • C即Controller指的是页面业务逻辑。
  • 使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。

MVC和MVVM的区别

并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。

也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而随着大前端的来到,出现了MVVM模式的框架。

MVVM框架:Vue就是基于MVVM模式实现的一套框架

在vue中:

  • Model:指的是js中的数据,如对象,数组等等。
  • View:指的是页面视图
  • viewModel:指的是vue实例化对象

为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思?

  • 如果已经有一个现成的服务端应用,可以将vue 作为该应用的一部分嵌入其中,带来更加丰富的交互体验;
  • 如果希望将更多业务逻辑放到前端来实现,那么VUE的核心库及其生态系统也可以满足各式需求(core+vuex+vue-route)。和其它前端框架一样,VUE允许将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。
  • 如果构建一个大型的应用,可能需要将东西分割成为各自的组件和文件,vue有一个命令行工具,使快速初始化一个真实的工程变得非常简单(vue init webpack my-project)。
  • 可以使用VUE的单文件组件,它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子,是一步步递进的,也就是说对VUE的使用可大可小,它都会有相应的方式来整合到项目中。所以说它是一个渐进式的框架。

主流框架实现双向绑定(响应式)的做法:

  • 脏值检查:angularangular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,angular只有在指定的事件触发时进入脏值检测
    大致如下: DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) XHR响应事件 ( $http ) 浏览器Location变更事件 ( $location ) Timer事件( $timeout , $interval ) 执行 $digest() 或 $apply()在 Angular 中组件是以树的形式组织起来的,相应地,检测器也是一棵树的形状。当一个异步事件发生时,脏检查会从根组件开始,自上而下对树上的所有子组件进行检查,这种检查方式的性能存在很大问题。

  • 观察者-订阅者(数据劫持):vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时,则会调用getter方法,当data中的属性被改变时,则会调用setter方法。Compile指令解析器,它的作用对每个元素节点的指令进行解析,替换模板数据,并绑定对应的更新函数,初始化相应的订阅。Watcher 订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

MVVM的优缺点

优点:

分离视图(View)和模型(Model),降低代码耦合,提高视图或者逻辑的重用性: 比如视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定不同的"View"上,当View变化的时候Model不可以不变,当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑提高可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放

缺点:

Bug很难被调试: 因为使用双向绑定的模式,当看到界面异常了,有可能是View的代码有Bug,也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。

另外,数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的一个大的模块中model也会很大,虽然使用方便了也很容易保证了数据的一致性,当时长期持有,不释放内存就造成了花费更多的内存对于大型的图形应用程序,视图状态较多,ViewModel的构建和维护的成本都会比较高。

详细内容请参考原文链接:https://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc

你可能感兴趣的:(vue,MVVM,MVC,vue)