MVVM在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上。
有人做过测试:使用Angular(MVVM)代替Backbone(MVC)来开发,代码可以减少一半。
此外,MVVM另一个重要特性,双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域,而不用手动更新它们。
M:Model(服务器上的业务逻辑操作)V:View(页面)
VM:ViewModel(Model与View之间核心枢纽,比如Vue.js)
双向是指ViewModel中的data部分和View之间的双向关系。
正向:数据驱动页面
反向:页面更新数据
绑定是指自动化处理,data改变了view随之改变,反之也是。
不用像传统方式那样,通过onChange事件获取用户输入,然后再通过改变innerHtml修改显示。
双向绑定都是依赖ES5中一个重要的API,Object.defineProperty。
定义:
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
语法:
Object.defineProperty(obj, prop, descriptor)
参数:
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。
返回值:
被传递给函数的对象。
。。。
MVVM 是 Model-View-ViewModel 的缩写。Model 代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑。View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步 View 和 Model 的对象, 连接 Model 和 View。
在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
区别:vue 数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷