shallowRef和shallowReactive使用误区-视图更新了
2022/8/15 23:24:18
本文主要是介绍shallowRef和shallowReactive使用误区-视图更新了,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
按照vue3文档中得说明,在使用shallowRef和shallowReactive是浅响应得,即修改深层数据视图应该是不更新得,但是使用过程中往往会出现视图更新得情况,如下:
修改前:
修改后:
发现视图更新了,这是为什么呢?
原因是有其他响应式数据更新了,从而触发了视图更新,例如上图中可以看到妈妈得名字改变了,从代码层面也能看到:
注意点:shallowRef和shallowReactive虽然是浅响应得,但是这个浅响应指的是视图得响应,而不是数据,上述得修改操作updateData中是修改了正常并且成功修改了值,因为是浅响应,正常情况下
此时视图是不更新得,导致上述结果得原因是p3修改触发了视图更新,视图更新过程中检测到p1,p2中数据发生了改变,所以其对应得视图也就会被更新;因此不管在哪里,只要有响应式数据触发了视图得更新
都会看到页面中爸爸和儿子得内容发生改变
解决办法:如果不想更新视图,那么就要保证其他得数据更新在p1,p2修改前发生,即保证p1,p2修改后不会再有导致视图更新得操作
这篇关于shallowRef和shallowReactive使用误区-视图更新了的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set