首先是2.0的双向绑定原理,基于Object.defineProperty实现
let obj = {
name:''
}
let virtualDom = JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj,"name",{
get(){
return virtualDom.name
},
set(val){
virtualDom.name = val
observer()
}
})
function observer(){
spanName.innerHTML = obj.name
inputName.value = obj.name
}
observer()
inputName.oninput = function(){
obj.name = this.value
}
setTimeout(() => {
obj.name = "chad"
}, 1000);
2.0的双向绑定首先要深克隆一份data数据,通过Object.defineProperty监听data里面的每个属性,通过get/set方法达到双向绑定数据。
缺陷:需要深度克隆数据、无法实现深度监听,例如监听值为对象时子属性或数组的成员。
3.0的监听方式是通过Es6的Proxy实现。
let obj = {}
obj = new Proxy(obj,{
get(targer,prop){
return targer[prop]
},
set(targer,prop,value){
targer[prop] = value
observer()
}
})
function observer(){
spanName.innerHTML = obj.name
inputName.value = obj.name
}
observer()
setTimeout(() => {
obj.name = "chad"
}, 1000);
inputName.oninput = function(){
obj.name = this.value
}
3.0通过Proxy监听整个对象,现实无须克隆数据,且能够深度监听的效果。