Vue2.X是如何利用Object.defineProperty()实现数据绑定的
程序员文章站
2022-03-01 12:57:14
...
Vue2.X是如何利用Object.defineProperty()实现数据绑定的
上一篇文章写到了Object.defineProperty的使用,这篇文章说一下Vue是如何利用这个方法实现数据绑定的。
首先把Vue中的核心方法defineReactive做一些简化
function defineReactive (obj, key, val, cb) {
var dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
/*....依赖收集等....*/
dep.depend()
return val
},
set:newVal=> {
val = newVal;
/*触发回调*/
dep.notify()
}
})
}
Vue通过defineReactive方法实现对需要观察的对象的每个属性进行监控。
dep对象就相当于一个调度中心的作用,如果有数据用到这个属性,它就会自动收集该属性到调度中心,如果某属性发生了改变,那就会通知调度中心来更新视图。
再看看dep方法和它的功能。相对比较简单:1、存储订阅者2、添加订阅者
function Dep () {
// 所有的watcher 放进这里统一管理
this.subs = []
}
Dep.target = null;
// 通知视图更新dom的 notify的方法
Dep.prototype.notify = function () {
// this.subs 存储 watcher
this.subs.forEach(sub => {
// sub 是某个Watcher 具体调用某个Watcher的update 方法
sub.update()
})
}
// 添加订阅者的方法
Dep.prototype.addSub = function (sub) {
this.subs.push(sub)
}
订阅器主要也是了两个方法;1、触发一下属性的获取,顺便把自己加到调度中心去 2、update更新视图
// 具体的订阅器Watcher
// 传入一个vue 的示例, 监听的属性, 以及处理的回调函数
function Watcher (vm,prop,callback) {
this.vm = vm;
this.$prop = prop;
this.value = this.get();
this.callback = callback;
}
// 添加watcher 获得属性的get 方法,当有属性访问/设置 的时候,就产生订阅者 将这个订阅者放进调度中心
Watcher.prototype.get = function () {
Dep.target = this;
// 获得属性值
const value = this.vm.$data[this.$prop];
return value
}
// 添加watcher的更新视图的方法
Watcher.prototype.update = function () {
// 当属性值有变化的时候,执行方法,更新试图
const value = this.vm.$data[this.$prop];
this.callback(this.value)
}
于是乎
当外界读取数据时会调用watcher,会触发getter把watcher添加到Dep依赖中。(也就是编译过程收集依赖)
当数据发生了变化,会触发setter,从而想Dep中的依赖(watcher)发送通知。(交互过程,调度中心去通知订阅器抓紧更新)。
Watcher 接收到通知后,会向外界发送通知,变化通知到外界可能触发试图更新,也有可能触发用户的某个回调函数等。(订阅器修改对应的值,页面参数随之相应,实现响应)
当然,这才只是单向绑定,双向绑定就是说视图更改数据,这个就比较简单,在编译过程中将标签绑定input方法,修改对应的数据即可。
有来有回,实现了双向绑定。
上一篇: webpack的使用及配置
推荐阅读
-
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
-
vue.js利用defineProperty实现数据的双向绑定
-
利用Python如何实现数据驱动的接口自动化测试
-
数据库原理 - 序列4 - 事务是如何实现的? - Redo Log解析(续)
-
分别使用 Object.defineProperty 和 proxy 实现简单的数据双向绑定
-
Proxy和Object.defineProperty实现简单的数据绑定
-
vue的双向数据绑定(Object.defineProperty(),和es6的Proxy的底层封装是Object.defineProperty()封装的);...
-
利用Object.defineProperty简单实现vue的数据响应式原理
-
利用Object.defineProperty实现一个简单的MVVM双向绑定
-
vue3.0响应式数据是如何实现的?相比vue2.0中Object.defineProperty()有什么优势?