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 = newValobserve(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