js实现一个简单的双向绑定
// vue2.0 使用Object.defineProperty实现双向绑定 3.0使用Proxy对象
let input = document.getElementById('input')
let p = document.getElementById('p')
let obj = {
name:'TylerYue'
}
// 监听 obj 的name属性
Object.defineProperty(obj,'name',{
set:function(value) {
this._value = value
// 将改变值赋给 控件
input.value=value
p.innerHTML=value
},
get:function() {
return this._value
}
})
input.addEventListener('input',function (e) {
console.log('obj.name上一次的值',obj.name)
obj.name = e.target.value
console.log('obj.name最新值',obj.name)
})
1、Object.defineProperty无法一次性监听所有属性,必须遍历或者递归来实现
Proxy对象无需遍历所有属性
2、Object.defineProperty无法监听对象新增加的属性,所以在vue中使用this.$set()方法新增对象属性
3、Object.defineProperty无法响应数组操作(可以监听数组的变化、无法对数组的变化进行响应)、
vue针对此情况将数组常用的api方法做了二次封装、调用时触发页面重新渲染