目录
5.4 合理触发响应
为了合理触发响应，我们需要处理一些问题。
首先，当值没有变化时，我们不应该触发响应：
const obj = { foo: 1 }
const p = new Proxy(obj, { /* ... */ })
effect(() => {
console.log(p.foo)
})
// 设置 p.foo 的值，但值没有变化
p.foo = 1
上述代码，p.foo 的初始值为 1，当为 p.foo 设置新的值时，如果值没有发生变化，则不需要触发响应。
为了满足需求，在调用 trigger 函数触发响应之前，我们需要检查值是否发生了变化
const p = new Proxy(obj, {
set(target, key, newVal, receiver) {
// 先获取旧值
const oldVal = target[key]
const type = Object.prototype.hasOwnProperty.call(target, key) ? 'SET' : 'ADD'
const res = Reflect.set(target, key, newVal, receiver)
// 比较新值与旧值，只要当不全等的时候才触发响应
if (oldVal !== newVal) {
trigger(target, key, type)
}
return res
}
})
在 set 函数内，先获取旧值 oldVal，比较新旧值，只有不全等时才触发响应。
但是，全等比较对 NaN 的处理有缺陷，因为 NaN === NaN 返回 false，为了解决这个问题，需要加一个条件：
const p = new Proxy(obj, {
set(target, key, newVal, receiver) {
// 先获取旧值
const oldVal = target[key]
const type = Object.prototype.hasOwnProperty.call(target, key) ? 'SET' : 'ADD'
const res = Reflect.set(target, key, newVal, receiver)
// 比较新值与旧值，只有当它们不全等，并且不都是 NaN 的时候才触发响应
if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
trigger(target, key, type)
}
return res
}
})
现在，我们已经解决了对 NaN 的处理问题。当新旧值不全等且不都是 NaN 时，才触发响应。
我们还需要处理从原型上继承属性的情况。首先，我们封装一个 reactive 函数，接受一个对象作为参数，返回创建的响应式数据：
function reactive(obj) {
return new Proxy(obj, {
// 省略拦截函数
})
}
接下来，创建一个例子：
const obj = {}
const child = reactive(obj)
const proto = { bar: 1 }
const parent = reactive(proto)
// 使用 parent 作为 child 的原型
Object.setPrototypeOf(child, parent)
effect(() => {
console.log(child.bar) // 1
})
// 修改 child.bar 的值
child.bar = 2 // 会导致副作用函数重新执行两次
在这个例子中，我们创建了两个响应式对象 child 和 parent，并将 parent 设置为 child 的原型。
在副作用函数中访问 child.bar 时，值是从原型上继承的。当我们执行 child.bar = 2 时，副作用函数会执行两次，导致不必要的更新。
我们分析下整个过程，访问 child.bar 时，触发 child 代理对象的 get 拦截函数。在拦截函数中，引擎使用 Reflect.get(target, key, receiver) 得到结果。如果对象自身