vue已经用了好久啦,面试的时候经常会被问到双向数据绑定的原理,之前一直理解得模模糊糊,闲下来仔细研究了一下,然后就有了这篇文章惹~~(●'◡'●)
1. 开始前我们要了解一下,Object.defineProperty是啥呢???
首先来了解下Object.defineProperty的语法:
Object.defineProperty(obj, prop, descriptor)
参数:
obj:要在其上定义属性的对象
prop:要定义或修改的属性的名称
descriptor :将被定义或修改的属性描述符。
返回值:
被传递给函数的对象
简单解释,Object.defineProperty是ES5中的属性,具有传入一个描述对象即可描述一个对象的属性的特性。
2.vue双向数据绑定实现
//定义一个对象
const data = {
_a :1,
_b : 2
}
Object.keys(data).forEach(key=>{
const newKey = key.slice(1)
Object.defineProperty(data,newKey,{
get(){
console.log(`read data's propery: ${newKey}`) //读取属性
return data[key]
},
set(v){
console.log(`set data's propery:${newKey},value:${v}`) //设置属性
this[key] = v
},
enumberable: true
})
Object.defineProperty(data,key,{
enumerable: false
})
})
data.b = 3 //传入新值
console.log(data)
在这个例子中,data作为一个消息发布者,在将data所有属性利用Object.defineProperty定义了他们的getter,setter后,每次更改data属性时,都将执行setter中定义的发布通知给watcher的逻辑。
总结来讲,就是利用Object.defineProperty的get(),set()方式,通过watcher作为桥梁通信,来完成数据变化 —>视图更新这一过程。