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作为桥梁通信，来完成数据变化 —>视图更新这一过程。
网友评论