前端vue实战小测试

62 阅读2分钟

前端vue实战小测试

问题1

我们先直觉判断一下,当input value大于5的时候是否会禁用。

其实这题考的就是对象的引用,我们可以在浏览器上试试下面的内容会打印什么。

暂时无法在Lark文档外展示此内容

讲解一下把再inputValue大于5的时候,我们看似改变了disabled,但实际上buttonOption里的disabled并没有改变,对于有时候会传一些复杂配置项的时候可能会遇到这个问题,这时候我们有个比较好的办法就是computedcomputed会依赖收集,当依赖变化的时候,buttonOption.disabled的值就会相应变化。在线地址

问题2

老规矩直觉判断,当按钮点击的时候,是否会进行深监听,以及新旧value的值。

此时我们监听了一个reactive定义的响应式数据,并且关闭了深监听,可是在打印中,我们依然进行了一个深监听,并且oldValue的值还是错误的。

然后我去翻了一下源码,一看不知道,原来不止是reactive定义的会有这个问题

我们先打一下断点

发现了一个问题,就是oldValuenewValue的引用是相同的,当newValue改变的时候oldValue也会改变。

这里我们看到最后,是导致oldValuenewValue引用相同的原因,而只有当我们直接性的使用一些引用类型进行监听的时候才会造成这个问题,而一些基本类型或者引用类型上的属性则不会造成OldValue的失效问题。

暂时无法在Lark文档外展示此内容

总结

这几天一直在修前面react的源码解析,主要是我注意到了在react源码理解的最大难点是在于复杂的数据结构,和各种指针链表的引用,但刚才看了一下v3effect和调度,感觉比react确实要好理解一些。

关于我的一些介绍