第 5 章 非原始值的响应式方案(2)
霍春阳(HcySunYang)
5.4 合理地触发响应
上一节中,我们从规范的角度详细介绍了如何代理对象,在这个过程中,处理了很多边界条件。例如,我们需要明确知道操作的类型是 'ADD' 还是 'SET',抑或是其他操作类型,从而正确地触发响应。但想要合理地触发响应,还有许多工作要做。
首先,我们来看要面临的第一个问题,即当值没有发生变化时,应该不需要触发响应才对:
如上面的代码所示,p.foo 的初始值为 1,当为 p.foo 设置新的值时,如果值没有发生变化,则不需要触发响应。为了满足需求,我们需要修改 set 拦截函数的代码,在调用 trigger 函数触发响应之前,需要检查值是否真的发生了变化:
如上面的代码所示,我们在 set 拦截函数内首先获取旧值 oldVal,接着比较新值与旧值,只有当它们不全等的时候才触发响应。现在,如果我们再次测试本节开头的例子,会发现重新设置相同的值已经不会触发响应了。
然而,仅仅进行全等比较是有缺陷的,这体现在对 NaN 的处理上。我们知道 NaN 与 NaN 进行全等比较总会得到 false:
换句话说,如果 p.foo 的初始值是 NaN,并且后续又为其设置了 NaN 作为新值,那么仅仅进行全等比较的缺陷就暴露了:
这仍然会触发响应,并导致不必要的更新。为了解决这个问题,我们需要再加一个条件,即在新值和旧值不全等的情况下,要保证它们都不是 NaN:
公开
同步至部落
取消
完成
0/2000
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
![](https://static001.geekbang.org/resource/image/d0/e4/d0880927e2a522a038be2d04bf19dfe4.png)
本文深入探讨了非原始值的响应式方案中触发响应的相关问题,包括值未发生变化时不需要触发响应、NaN值的比较问题、从原型上继承属性的情况以及如何确保合理地触发响应。文章特别强调了如何区分浅响应和深响应,并给出了相应的代码示例。另外,还介绍了只读和浅只读的实现方法,以及代理数组的相关操作。通过具体的代码示例和技术原理分析,帮助读者深入理解非原始值的响应式方案中触发响应的相关问题。文章内容丰富,深入浅出,适合对非原始值的响应式方案感兴趣的读者阅读学习。文章内容涵盖了对数组的操作、数组的索引与length属性、遍历数组等多个方面,为读者提供了全面的技术知识和实用的代码示例。文章还介绍了如何处理隐式修改数组长度的原型方法,通过重写数组的push方法等方式解决了相关问题,为读者呈现了一种解决技术问题的思路和方法。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue.js 设计与实现》
《Vue.js 设计与实现》
立即购买
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论