vuemvvm（vuemvvm原理）

本篇文章给大家谈谈vuemvvm，以及vuemvvm原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、浅谈Vue的双向绑定
• 2、前段开发用jQuery操作dom好还是Vue这样的mvvm好用？
• 3、vue的设计思想
• 4、关于 Vue、React 与 MVVM
• 5、为什么尤雨溪尤大说VUE没有完全遵循MVVM?

浅谈Vue的双向绑定

在使用vue的蠢斗时候给我最大的感受就是双向绑定实在是太方便了吧，这次来谈谈我的理解。

一：MVVM模式;

    说到vue的双向绑定首先联系到的就是MVVM(Model-View-ViewModel)模式了，如下图所示，当试图发生改变的时候传递给VM,再让数据得到更新，当数据发生改变的时候传给VM,使得试图发生改变；

    MVVM模式是通过以下三个核心组件组成，每个都有它自己独特的角色：

         Model  - 包含了业务和验证逻辑的数据模型

         View  - 定义屏幕中View的结构，布局和外观

         ViewModel  - 扮演“View”和“Model”之间的使者，帮忙处理  View  的全部业务逻辑

二、vue数据双向绑定原理

vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，

vue是怎么实现数据劫持的呢？vue实例话的时候会去遍历所有的属性，给这些属性添加get和set方法进行数据劫持；

以上就是mvvm实现双向绑定的思路了，那么具体怎么实现呢？

我们开头的时候说到了，要想实现数据的双向绑定首先就要通过数据拦截来进行监听数据的改变，这个时候就要设置一个监听器Observer来进行监听，如果属带毕磨性发生改变的话就告诉订阅者Watcher看看是否需要改变，同时的话订阅者可以有好多个，我们就用一个订阅者管理器(Dep)来管理这些订阅者。紧接着我们还要有个指令解析器来对每个节点进行扫描和解数局析（解析节点的指令如v-on）,把他们初始化成一个订阅器Watcher,并且绑定相应的函数，Watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染；

以上的图片可以具，体归纳为：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

[img]

前段开发用jQuery操作dom好还是Vue这样的mvvm好用？

jquery：使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

vue：通过Vue对象将数据和View完全分离开桐悉来了。对数据进行操作不再需要引用相应指笑的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

jquery：随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低。

vue：是一个精简的MVVM。从技术角度讲，Vue.js专注于MVVM模型的ViewModel层。它通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完局逗乎成对页面视图的渲染，使用应该会越来越普遍。

jquery操作的是直接dom元素。

vue操作的是dom元素对象。

vue适用的场景：复杂数据操作的后台页面，表单填写页面，侧重数据绑定。

jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面，侧重样式操作，动画效果等。

vue使用者的思路转变：界面不是被你的事件改变的，事件只需要改变数据，界面是数据的实时反馈。

vue的设计思想

vue是一个MVVM框架，将视图View的状态和行为抽象化成ViewModal层，让我们将视图 UI 和业务逻辑分开。乱樱

重点在ViewModal层，要实现数据绑定，数据绑定的核心是响应式，所以

MVVM的三要素是：数据响应式、模板引擎及渲染；

以上图片中的内容就是vue的实现思想，只不过是vue1中的实现思想；

vue2中的改变是

通过以上源码观察，尤其：

可以看出vue2中的 Object.defineProperty 消耗是非常大的，不仅要遍历自身的key，去添加响应式，并且还要去遍历子属性的key。

vue1中watcher颗粒度太小了，所以改成一个组橡培件一个watcher；

使用vnode最重要的原因是：只有一个watcher，我改了值很多foo，bar,界面受影响很梁陪唯多，没办法精确知道谁负责谁，所以只能两个VNode进行遍历；

带来的好处：

规避真是dom操作，

如何针对不同平台实现不同patch的呢：

拿出核心的createPatchFunction工厂函数逻辑，根据传参返回一个真的patch函数

参数nodeOps是节点操作，

参数modules是属性更新操作,针对平台的platformModules操作

简单说就是 把平台特有的 { nodeOps, modules } 节点操作和节点属性传进去，会得到平台特有的patch函数

关于 Vue、React 与 MVVM

首先要明确 MVVM 是什么，它是 MVC 的衍生架构。无论是 MVC 还是 MVVM 都不是只针对于前端或后端开发答和的，它们是针对于所有软件开发的架构。

在 MVC 中，Mode 是数据，View 是用户看到的视图，Controller 是处理逻辑。用户触发 Controller（比如后端被http驱动，有一个明显的Control入口，其他场景中也有可能在 View 触发）， Controller 运行逻辑改变乎扰 Model，Model 用变动后的数据更新 View 。

MVVM 也被称为 model-view-binder。MVVM 中，VM 是 ViewModel。View 与 ViewModel 之间采用数据绑定，绑定是双向的，避免了开发人员写一些同步 ViewModel 和 View 的重复逻辑。通过数据绑定，View 发生变化会自动反映到 ViewModel，ViewModel 产生的变化也会自动更新 View。

ViewModel 创建了一个视图的抽象，将视图中的状态和行为抽离出来。

在 MVVM 的实现中，还引入了隐式的一个 Binder 层，而声明式的数据和命令的绑定在 MVVM 模岁举旦式中就是通过它完成的。

Vue 是一个提供了 MVVM 风格的双向数据绑定的框架。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。

在 Vue 中，Model 和 VM，VM 和 和 View 之间都是双向数据绑定，实现方式是数据劫持。

但是在 Vue 中，哪一部分是 VM，哪一部分是 M，其实不太好区分。如果 Vue 的一个实例是 VM，那么 model 是什么？如果 data 是 model，先经过实例中的逻辑改变 data，然后 view 产生变化又不符合 MVVM。或者说 VM 是 Vue 框架实现数据响应的源码，实例中的逻辑是 model 层的逻辑，用于改变 model 。所以，个人认为 Vue 只能说是有 MVVM 风格的框架，不能说是一个 MVVM 框架。

react，单向数据流。本身只是 一个函数 ui = render (data) 官方就这么简单一个公式。加上状态管理等，可以做 MVVM 风格的开发。

不管是 MVC 还是 MVVM ，具体到实际框架，组成成分之间都不会泾渭分明，几种组成成分之间常常有难以划分的模糊地带。如果忽略划分细节从整体来看，Vue 参考但没有完全遵循 MVVM，React 只是一个 View 层。

为什么尤雨溪尤大说VUE没有完全遵循MVVM?

严格的MVVM要求View不能和Model直接通信，而Vue在组件提供了$refs这个属性，让Model可以直接操作View，违反了这一规定，所以说Vue没有完全遵循MVVM。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、塌好音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。

同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

因为WPF技术出现，从而使MVC架构模式有所改进团纳铅，MVVM 模式便是使用的是数据绑定基础架构。它们可以轻松构建UI的必要元素。

可以参考The Composite Application Guidance for WPF(prism)

View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。

往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。

在MVP模式中，为了让UI层能够从逻辑层上分离下来，设计师们在UI层与逻辑层之间加了一层interface。无论是UI开发人员还是数据开发人员，都要尊重这个契约、按照它进行设计和开发。这样，理想状态下无论是Web UI还是Window UI就都可以使用同一套数据逻辑了。

借鉴MVP的IView层，养成习惯。View Model听起来比Presenter要贴切得多；会把一些跟事件、命茄判令相关的东西放在MVC的'C',或者是MVVM的'Vm'。

关于vuemvvm和vuemvvm原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。