vue2 双向数据绑定原理是通过Object.definedProperty()实行数据劫持,结合observer() 观察者,来实现
<div>
姓名:<span id="spanName"></span>
</div>
<input id="inputName" type="text">
<script>
let obj={name: ''}
// 深拷贝obj 防止在get()里return obj.name 时死循环
let newObj = JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj, 'name', {
get(){
// console.log('获取')
return newObj.name
},
set(val){
// console.log('设置')
// 这次的值如果和之前的一样,就不往下操作了
if(val === newObj.name) return
newObj.name = val
observer()
}
})
function observer(){
spanName.innerHTML = obj.name
inputName.value = obj.name
}
setTimeout(()=> {
obj.name = 'hhhh'
},3000)
inputName.oninput = function (){
obj.name = this.value
}
// tip: 1.需要对原始数据进行克隆
// 2.需要监听对象中的每一个属性
</script>
vue3 是通过3.0新增的Proxy 来实现
// vue3.0
let obj={ }
// Proxy 可以监听对象中的所有属性
obj = new Proxy(obj, {
get(target,prop){
return target[prop]
},
set(target,prop,value){
target[prop] = value
observer()
}
})
function observer(){
spanName.innerHTML = obj.name
inputName.value = obj.name
}
setTimeout(()=> {
obj.name = 'hhhh'
},3000)
inputName.oninput = function (){
obj.name = this.value
}
B站看别人视频学到的