526互联

MVVM开发模式+双向数据绑定及扩展

发布时间 2023-06-13 15:01:05作者: 有只小菜猫

一、MVVM开发模式

（1）前端的视图层概念=》由MVC演化

（2）　　M：model【模型层】：渲染页面所以来的数据源（通过ajax从服务端获取的数据）

　　　　  V：view【视图层】：将数据模型转换成UI展示给用户

　　　　  VM：【视图模型层】：当监听到DOM变化时，会自动地更新数据源里面所依赖的数据

　　　　　　　　　　　　　　（修改了model数据源数据，VM自动渲染页面）

  • Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，实现了 Model 和 View 的数据自动同步
  • Model 和 ViewModel 之间有着双向数据绑定的联系

 

 

二、双向数据绑定原理

【数据和视图相互驱动更新，是相互影响的关系】

1、通过 数据劫持 结合 发布订阅模式的方式来实现的

2、通过Object.defineProperty()来劫持各个属性的setter，getter

3、数据变动则发布消息给订阅者，触发相应的监听回调。

 

三、Vue实现数据响应式的基本原理

【数据驱动视图】

（1）vue的数据响应式：当数据发生变化时，通知改变的代码

（2）基本原理：

  • 采用数据劫持结合发布者—订阅者模式的方式来实现数据的响应式

  • 通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，

  • get（）方法可以读取数据、收集依赖，set（）方法可以改写数据

  • 数据变动进行数据比较，变化则会通知订阅者，触发监听回调，更新视图

 

四、发布订阅模式

此模式分为 发布者 和 订阅者 两个概念，

发布者收集订阅者的需求

然后在某个时刻告知订阅者

 

五、使用 Object.defineProperty() 来进行数据劫持有什么缺点？

（1）在对一些属性进行操作的时候, 使用这种方法无法进行拦截。

【无法监控到数组下标的变化，通过数组下标修改元素，无法实时响应】

对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。

（2）兼容性的问题，因为 Proxy 是 ES6 的语法，无法使用Proxy对对象进行代理，实现数据劫持。