当前位置：首页 > news >正文

Vue3源码梳理：响应式系统的前世今生

news 来源：原创 2024/5/20 22:26:09

响应性数据的前世

js的程序性: 一套固定的，不会发生变化的执行流程

1 ）没有响应的数据

// 定义商品对象
const product = {price: 10,quantity: 2
}// 总价格
let total = product.price * product.quantity
console.log(`总价格：${total}`) // 20// 修改商品的数量
product.quantity = 5
console.log(`总价格：${total}`) // 20

这是一段非常普通的js程序，当最后 product.quantity 发生改变的时候，最终结果并没有发生变化
这里，当商品数量发生变化，总价格也会发生变化是我们的期望
由于js程序性的约束，我们只能得到20，我们想让程序变得更智能

2 ）进一步改造

// 定义商品对象
const product = {price: 10,quantity: 2
}// 总价格
let total = 0// 定义一个 effect 函数
const effect = () => {total = product.price * product.quantity // 访问属性，这里是 getter行为
}effect()
console.log(`总价格：${total}`) // 20// 修改商品的数量
product.quantity = 5 // 修改属性，这里是 setter 行为effect() // 注意这里
console.log(`总价格：${total}`) // 50

这里，封装了一个effect方法，这个方法是重新计算 total 的方法
当 product.quantity 数据发生改变的时候，手动调用了一次 effect 方法
以上的方式是每次手动触发 effect 方法进行一次类似 getter 操作
这样手动操作，是比较麻烦的
为此，js中的API可以有效解决这个问题

响应式数据的今生

1 ）关于响应性数据

响应数据：是指影响视图变化的数据

2 ) vue2核心响应式API Object.defineProperty() 方法

let quantity = 2
const product = {price: 10,quantity
}// 总价格
let total = 0// 计算总价格函数
const effect = () => {total = product.price * product.quantity
}effect()
console.log(`总价格：${total}`) // 20// 响应式变化
Object.defineProperty(product, 'quantity', {set(newVal) {console.log('setter')quantity = newValeffect()},get() {console.log('getter')return quantity // 这里的变量是暴露在最外面的，不是很好}
})

这样可以在指定对象上，指定属性上的 getter 和 setter 行为，以此来触发effect(更新程序)
这样来说，相对更智能了

3 ） Obeject.defineProperty() 在设计上的缺陷

存在一个致命缺陷：vue官网/深入响应式原理/检测变化的注意事项
- 由于js的限制，vue不能检测数组和对象变化

代码示例，如下

<template><div><ul><li v-for="(val, key, index) in obj" :key="index">{{ key }} --- {{ val }}</li></ul><button @click="addObjKey">为对象增加属性</button><div> ---------------- </div><ul><li v-for="(item, index) in arr" :key="index">{{ item }} --- {{ index }}</li></ul><button @click="addArrItem">为数组增加元素</button></div>
</template>
<script>export default {name: 'App',data() {return {obj: {name: '张三',age: 30},arr: ['张三', '李四']}},methods: {addObjKey() {this.obj.gender = '男'console.log(this.obj)},addArrItem() {this.arr[2] = '王五'console.log(this.arr)}}}
</script>

上面两个按钮点击后，数据会更新，但是页面视图不会更新
当对象新增一个没有在data中声明的属性时，新增的属性不是响应式的
当为数组通过下标形式新增一个元素时，新增的元素不是响应式的
why?
- Object.defineProperty 只能监听指定对象，指定属性的 getter 和 setter
- js限制是指：没有办法知道为某一个对象新增了某一个属性这类行为，新增属性会失去响应性

4） Vue3中的 Proxy

文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
语法
```
const p = new Proxy(target, handler)
```
- target 表示proxy包装的目标对象，可以是任何对象: 原生数组，函数，甚至另一个对象
- p 是 proxy的实例，是代理对象
- handler 是一个对象，可以在这个对象上指定getter和setter

代码改造，示例如下

// 定义商品对象
const product = {price: 10,quantity: 2
}// 生成代理对象, 注意事项：使用时不能使用被代理对象(原对象)，而应该使用代理对象
// proxy 代理的是整个对象，而非某个对象的某个属性
const proxyProduct = new Proxy(product, {set(target, key, newVal, receiver) {// console.log('setter')target[key] = newVal// 这里触发 effect 重新计算effect()return true},get(target, key, receiver) {// console.log('getter')return target[key]}
})// 总价格
let total = 0// 定义一个 effect 函数
const effect = () => {total = proxyProduct.price * proxyProduct.quantity // 访问属性，这里是 getter行为
}effect()
console.log(`总价格：${total}`) // 20// 修改商品的数量, 注意这里是修改的代理对象的值，而非被代理对象的值
proxyProduct.quantity = 5 // 修改属性，这里是 setter 行为effect()
console.log(`总价格：${total}`) // 50

通过修改代理对象的值，来让被代理对象同步发生变化
这里使用 proxy 完成了和 Object.defineProperty一样的效果
总结：
- proxy:
  - Proxy 将一个对象 (被代理对象), 得到一个新的对象 (代理对象), 同时拥有被代理对象中所有的属性
  - 当想要修改对象的指定属性时，我们使用代理对象进行修改
  - 代理对象的任何一个属性都可以触发 handler 的getter和setter
- Object.defineProperty
  - 该API为指定对象的指定属性设置属性描述符
  - 当想要修改对象的指定属性时，可以使用原对象进行修改
  - 通过属性描述符，只有被监听的指定属性，才可以触发 getter 和 setter
- 所以，当 vue3 通过 Proxy 实现响应性核心 API 之后， vue 将不会再存在新增属性时失去响应性的问题

5 ） proxy的最佳合伙API: Reflect，拦截js对象操作

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handler (en-US) 的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。
```
const obj = { name: '张三' }
Reflect.get(obj, 'name') // '张三'
```
Reflect.get(target, propertyKey[, receiver])
- 可以看到，这个 API 有三个参数
- target 需要取值的目标对象
- propertyKey 需要获取的值的键值
- receiver 如果target对象中指定了getter，receiver则为getter调用时的this值

测试代码如下:

// p1 对象
const p1 = {lastName: '张',firstName: '三',get fullName() {return this.lastName + this.firstName}
}// p2 对象
const p2 = {lastName: '李',firstName: '四',get fullName() {return this.lastName + this.firstName}
}// 测试
console.log(p1.fullName) // 张三
console.log(Reflect.get(p1, 'fullName')) // 张三
console.log(Reflect.get(p1, 'fullName', p2)) // 李四 这里，改变了getter的this指向，this指向了 p2, 所以 getter中获取的是 p2的fullName属性console.log(p2.fullName) // 李四

使用 proxy 和 Reflect 一起使用

// p1 对象
const p1 = {lastName: '张',firstName: '三',get fullName() {return this.lastName + this.firstName}
}const proxy = new Proxy(p1, {get(target, key, receiver) {console.log('getter')return target[key]}
})console.log(proxy.fullName) // 这里进行一次getter操作，会执行一次

上述代码只会触发一次getter, 因为其中的this指向是target，也就是原对象p1
但是，我们的理解，如果做任意的取值都会触发一次getter, 也就是访问fullName的时候会触发一次getter, 但是fullName里面也有两次getter
这时候，我们想要触发三次getter 如何修改呢

// p1 对象
const p1 = {lastName: '张',firstName: '三',get fullName() {return this.lastName + this.firstName}
}const proxy = new Proxy(p1, {get(target, key, receiver) {console.log('getter', key)// return target[key]return Reflect.get(target, key, receiver) // 注意，修改这里}
})console.log(proxy.fullName) // 这里进行一次getter操作，会执行一次

这时候 proxy.fullName 会触发三次 getter的行为
- 先输出：fullName 的getter
- 再输出：lastName 的getter
- 最后输出：firstName 的getter
某些场景下，使用 return target[key] 会存在bug,
请使用 return Reflect.get(target, key, receiver) 代替