传统MVC设计模式与MVVM的区别

// MVC设计模式
// M:model 模型 数据层
// V:view 视图 页面上的dom展示
// C:Controller 控制器 逻辑控制层
当视图被操作(点击,输入…)的时候,控制器里面业务逻辑会执行,去发起ajax请求获取数据模型,然后获取再dom节点渲染到页面上,Controller是MVC核心层,数据层比较边缘,控制器大部分都是在操作dom

// M:model 模型 数据层(data)

// V:view 视图 页面上的dom展示

// VM:viewModel层是vue自带的,不需要我们编写渲染

VM 底层用到了es5的api Object.defineproperty()[注:该方法可以在一个对象上定义新属性或修改已有属性], 同时引入了虚拟dom,View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中， 而Model 数据的变化也会立即反应到View 上， 开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理

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