shallowRef和shallowReactive使用误区-视图更新了

本文主要是介绍shallowRef和shallowReactive使用误区-视图更新了，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

按照vue3文档中得说明，在使用shallowRef和shallowReactive是浅响应得，即修改深层数据视图应该是不更新得，但是使用过程中往往会出现视图更新得情况，如下：

修改前：

修改后：

发现视图更新了，这是为什么呢？

原因是有其他响应式数据更新了，从而触发了视图更新，例如上图中可以看到妈妈得名字改变了，从代码层面也能看到：

注意点：shallowRef和shallowReactive虽然是浅响应得，但是这个浅响应指的是视图得响应，而不是数据，上述得修改操作updateData中是修改了正常并且成功修改了值，因为是浅响应，正常情况下

此时视图是不更新得，导致上述结果得原因是p3修改触发了视图更新，视图更新过程中检测到p1,p2中数据发生了改变，所以其对应得视图也就会被更新；因此不管在哪里，只要有响应式数据触发了视图得更新

都会看到页面中爸爸和儿子得内容发生改变

解决办法：如果不想更新视图，那么就要保证其他得数据更新在p1,p2修改前发生，即保证p1,p2修改后不会再有导致视图更新得操作

这篇关于shallowRef和shallowReactive使用误区-视图更新了的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript