瓜果蔬菜做的好的电商网站网站开发后台注意事项

目录

5.4 合理触发响应

5.5 浅响应与深响应

5.6 只读和浅只读

---

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) 得到结果。如果对象自身