前端vue实战小测试
问题1
我们先直觉判断一下,当input value
大于5的时候是否会禁用。
其实这题考的就是对象的引用,我们可以在浏览器上试试下面的内容会打印什么。
暂时无法在Lark文档外展示此内容
讲解一下把再inputValue
大于5的时候,我们看似改变了disabled
,但实际上buttonOption
里的disabled
并没有改变,对于有时候会传一些复杂配置项的时候可能会遇到这个问题,这时候我们有个比较好的办法就是computed
,computed
会依赖收集,当依赖变化的时候,buttonOption.disabled
的值就会相应变化。在线地址。
问题2
老规矩直觉判断,当按钮点击的时候,是否会进行深监听,以及新旧value的值。
此时我们监听了一个reactive
定义的响应式数据,并且关闭了深监听,可是在打印中,我们依然进行了一个深监听,并且oldValue
的值还是错误的。
然后我去翻了一下源码,一看不知道,原来不止是reactive
定义的会有这个问题
我们先打一下断点
发现了一个问题,就是oldValue
和newValue
的引用是相同的,当newValue
改变的时候oldValue
也会改变。
这里我们看到最后,是导致oldValue
和newValue
引用相同的原因,而只有当我们直接性的使用一些引用类型进行监听的时候才会造成这个问题,而一些基本类型或者引用类型上的属性则不会造成OldValue
的失效问题。
暂时无法在Lark文档外展示此内容
总结
这几天一直在修前面react
的源码解析,主要是我注意到了在react
源码理解的最大难点是在于复杂的数据结构,和各种指针链表的引用,但刚才看了一下v3
的effect
和调度,感觉比react
确实要好理解一些。