Vue学习--MVVM模型

MVVM模型

MVVM简介
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

MVVM模型

MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。

Vue.js中mvvm的体现

Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

实例分析如下：

由例子可知ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干预。

Vue.js关于双向数据绑定的一些实现细节

下面我又简单的了解了一下Vue.js关于双向数据绑定的一些实现细节；主要参考了下面这篇文章，很有研究价值，有意向者可以去看一下：
深入MVVM模型带你理解Vue.js的双向绑定

vue是采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定的。当把一个普通的javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖。在属性被访问和修改时通知变化。

Observer数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新的值并通知订阅者，内部采用的Obiect.defineProperty的getter和setter来实现。
complie指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定Observer和Complie的桥梁,能够订阅并收到每个属性变动的通知，执行指令绑定的相应的回调函数
Watcher订阅者，作为连接Observer和Complie的桥梁,能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
Dep消息订阅器，内部维护了一个数组，用来收集订阅者（watcher）,数据变动触发notify函数，再调用订阅者的update方法。

以上过程可总结为：

Observer相当于Model层观察vue实例中的data数据，当数据发生变化时，通知Watcher订阅者。
Compile指令解析器位于View层，初始化View的视图，将数据变化与更新函数绑定，传给Watcher订阅者。
Watcher是整个模型的核心，对应ViewModel层，连接Observer和Compile。所有的Watchers存于Dep订阅器中，Watcher将Observer监听到的数据变化对应相应的回调函数，处理数据，反馈给View层更新界面视图。

原文地址：ahuiyo的博客-Vue学习–MVVM模型

Vue学习--MVVM模型相关推荐

Vue的MVVM模型和双向数据绑定原理
1.MVVM模型的概念 MVVM - 是 Model.View.ViewModel 三者的缩写,是一种前端开发的模式,其核心在于数据和视图的双向数据绑定,不再需要程序猿手动操作DOM,也就是所谓的 ...
vue中MVVM模型
M(Model):模型,对应的是vue模板语法中data中的数据. V(View):视图,模板代码. VM(ViewModel):视图模型,对应的是vue实例,因此我们一般用vm来接收实例.
【Vue】MVVM模型，vue中的data、methods属性
从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
Vue学习（MVVM、入门练习）-学习笔记
文章目录 Vue学习(MVVM.入门练习)-学习笔记入门实例 Vue学习(MVVM.入门练习)-学习笔记入门实例 <!DOCTYPE html> <html> <he ...
Vue MVVM模型
简介 MVVM 是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可 ...
Vue核心之MVVM模型
1. M:模型(Model) :对应data 中的数据 2. V:视图(View) :模板 3. VM:视图模型(ViewModel) : Vue 实例对象每个 Vue 应用都是通过用 Vue 函数 ...
VUE的el和data的写法以及MVVM模型、VUE的数据代理
第一.VUE的el和data的两种写法: el的两种写法如下: 第一个形式如下: const v = new Vue({//第一种el的写法el:'#demo',data: {name: '三清祖师' ...
Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...

Vue学习--MVVM模型

MVVM模型

Vue学习--MVVM模型相关推荐

最新文章

热门文章