vue数据双向绑定v-model原理

通过数据劫持结合发布者-订阅者模式进行双向数据绑定的

数据劫持就是通过Object.defineProperty(obj,key,val) 劫持各个属性的getter,setter属性,进而获取属性值并进行监听

Observer 观察者  递归的监听对象上的每一个属性,当属性值发生改变时,会触发相应的watcher

Watcher  发布者  当监听的数据值发生修改时,执行相应的回调函数

Dep  订阅管理器  连接观察者和发布者的桥梁,每一个Observer对应一个dep,它内部维护一个数组,存储与该Observer相关的Watcher

Object.defineProperty()中可以设置get和set方法

get 是给属性提供getter的方法,获取属性值,需要有返回值,该方法返回值被用作属性值,读取属性值时会调用该函数

set 是给属性提供setter的方法,设置属性值,不需要返回值,设置属性值时会调用该函数

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容