js实现一个简单的双向绑定

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方法做了二次封装、调用时触发页面重新渲染