vue3的双向绑定原理分析

谈到vue3的双向绑定原理就得先知道为什么vue2的双向绑定方式会被废弃

vue2的双向绑定

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性或者修改一个对象的现有属性并返回此对象

相关语法详见这篇文章Object.defineProperty

实现监听器

调用defineReactive数据发生变化触发update方法实现数据响应式

// 遍历对象
function observe(obj) {
    if (!obj || typeof obj !== 'object') {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

// 劫持对象
function defineReactive(obj, key, val) {
    observe(val) // 存在嵌套对象的情况下需要进行递归
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                observe(newVal) // 新值是对象的情况
            }
        }
    })
}

const obj = {
  name: 'initial name',
  age: 30
}
observe(obj)
setTimeout(()=>{
  obj.age = 33
},5000)

实现监听器更详细的讲解可以阅读这篇文章从0开始实现简易版vue2

局限性

上述例子能够实现对一个对象的基本响应式但仍然存在诸多问题

对象

现在对一个对象进行添加与删除属性操作无法劫持到

const obj = {
  name: 'initial name',
  age: 30
}
observe(obj)
obj.school = 'HPU'
delete obj.age

Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

Vue里是通过递归以及遍历data对象来实现对数据的监控的如果属性值也是对象那么需要深度监听容易造成性能问题。

显然如果能劫持一个完整的对象不管是对操作性还是性能都会有一个很大的提升。

数组

在Vue中无法监控到数组下标的变化导致直接通过数组的下标给数组设置值无法实现数据响应式。

const arrData = [1,2,3,4,5];
observe(arrData)

arrData.push()
arrData.pop()

但是对已经劫持过的数组原生js是能够实现对已有下标更新数据实现数据响应式。这里vue是无法做到的它对此进行了限制。

arrData[0] = 'test'

arrData[0] // get 0:test

所以在Vue2中增加了$set、$delete API并且对数组api方法(push pop shift unshift splice sort reverse)进行了重写。。

// 数组重写
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
  arrayProto[method] = function  {
    originalProto[method].apply(this.arguments)
    dep.notice()
  }
});

// set、delete

// 对象
Vue.set(obj, 'sex', 'man')
Vue.delete(obj, 'sex')

// 数组
Vue.set(arrData, 0, 'test')
Vue.delete(arrData, 0)

经过vue内部处理后可以使用上述数组方法来实现数组的动态更新

vue3的双向绑定

proxy

相关语法详见这篇文章Proxy

实现监听器

Proxy的监听是针对一个对象的那么对这个对象的所有操作会进入监听操作这就完全可以代理所有属性了。

function reactive(obj) {
    if (!obj || typeof obj !== 'object') {
        return obj
    }
    // Proxy相当于在对象外层加拦截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`设置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`删除${key}:${res}`)
            return res
        }
    })
    return observed
}

测试一下对对象的操作发现都能劫持

const state = reactive({
    name: 'caoyuan'
})
// 1.获取
state.name // 获取name:caoyuan
// 2.设置已存在属性
state.name = 'name changed' // 设置name:name changed
// 3.设置不存在属性
state.sex = 'man' // 设置sex:man
// 4.删除属性
delete state.sex // 删除sex:true

也可以直接监听数组的变化push、pop、splice等

const arr = [1,2,3]
const proxtArr = reactive(arr)
proxtArr.push(4)

// 输出
// 获取push:function push() { [native code] }
// 获取length:3
// 设置3:4
// 设置length:4

再测试嵌套对象情况这时候发现没有监听到更深层级的数据变化了

const state = reactive({
    childObj: { 
        a: 1 
    }
})

// 读取嵌套对象属性
state.childObj.a // 输出获取childObj:[object Object] 没有具体到子对象的键名

// 设置嵌套对象属性
state.childObj.a = 10 // 无输出内容

如果要解决需要进行递归处理

function reactive(obj) {
    if (!obj || typeof obj !== 'object') {
        return obj
    }
    // Proxy相当于在对象外层加拦截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${key}:${res}`)
            return typeof res === 'object' && res !== null ? reactive(res) : res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`设置${key}:${value}`)
            return typeof res === 'object' && res !== null ? reactive(res) : res
        },
    })
    return observed
}

const state = reactive({
    childObj: { 
        a: 1 
    }
})

// 读取嵌套对象属性
state.childObj.a 
// 输出如下
// 获取childObj:[object Object]
// 获取a:1

// 设置嵌套对象属性
state.childObj.a = 10 
// 输出如下
// 获取childObj:[object Object]
// 设置a:10

Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等这是Object.defineProperty不具备的

Proxy 不兼容IE也没有 polyfill, 而defineProperty 能支持到IE9