vue2与vue3双向数据绑定

vue2 双向数据绑定

通过 Object.defineProperty 来劫持对象属性的 getter 和 setter ，一旦数据发生改变，再通知订阅者

Object.defineProperty()痛点

不能检测以下数组的变动：
1、利用索引直接设置一个数组项时，例如：vm.items[index] = newValue
2、修改数组的长度时，例如：vm.items.length = newLength

官网深入响应式原理一章有较详细阐述，针对以上两种情况解决方法，官网也有给出答案，那就是使用set方法。

// 触发更新视图
function updateView() {
    console.log('视图更新')
}
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
    nums: [10, 20, 30]
}
function defineReactive(target, key, value) {
    // 这里为啥要用defineReactive包裹，因为这个函数和get，set形成了闭包，
    // 就能保存value的值，不然的话，得定义一个全局变量去保存value
    observer(value) //深度监听
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                observer(newValue) //这里设置observer是为了 data.age = { num: 1 }，设置的值是个对象时进行监听
                value = newValue
                updateView()
            }
 
        }
    })
}
// 监听数组
const oldArrayPropoty = Array.prototype
const arrProto = Object.create(oldArrayPropoty)
const arrMethod = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
arrMethod.forEach(methodsName => {
    arrProto[methodsName] = function () {
        updateView()
        oldArrayPropoty[methodsName].call(this, ...arguments)
    }
})
 
function observer(target) {
    if (typeof target != 'object' || target == null) {
        //不是对象或者数组
        return target
    }
    if (Array.isArray(target)) {
        target.__proto__ = arrProto
        console.log(target)
    }
    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}
observer(data)
// data.name = "小明"
// data.info.address = '上海' // 深度监听
// data.age = { num: 1 }
// data.job='打杂' 对于新增属性是无法监控的
data.nums.push(4)

vue3 双向数据绑定：

通过 Proxy直接代理对象

Proxy优势

proxy是对整个对象进行代理，所以可以监听对象某个属性值的变化，还可以监听对象属性的新增和删除，而且还可以监听数组。

而defineProperty只能响应首次渲染时候的属性，但是proxy的兼容性不好，IE无法兼容，vue2是兼容到了IE8,但是vue3使用了proxy说明放弃了对IE的兼容考虑。

const user = {
    name: '小明',
    age: 20,
    wife: {
        name: '小夏',
        age: 18
    }
}
//把目标对象变成代理对象
//参数1：user----->target目标对象
//参数2:handle---->处理器对象，用来监视数据以及数据操作
const proxyUser = new Proxy(user, {
    //获取目标对象的某个属性值
    get(target, props) {
        console.log('get方法调用了')
        return Reflect.get(target, props)  //需要用到Reflect将值反射出去，不然是拿不到值的，Reflect配合Proxy使用
    },
    // 修改目标对象的属性值
    set(target, props, value) {
        console.log('set方法调用了')
        return Reflect.set(target, props,value)
    },
    //删除目标对象的属性值，为目标对象添加新的属性
    deleteProperty(target, props) {
        console.log('delete方法调用了')
        return Reflect.deleteProperty(target, props)
    }
})
 
console.log(proxyUser.name)
//通过代理对象更新目标对象上的某个属性值
proxyUser.name='大明'
console.log(user)
delete proxyUser.name
console.log(user)
proxyUser.wife.name='小红'

建议想要真正了解 Object.defineProperty 和 proxy 是如何实现数据监听的小伙伴，可以自己手动实现下，对监听的过程加深理解