ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-08-15 18:04:27  阅读:141  来源: 互联网

标签:p1 修改 shallowReactive 更新 响应 视图 shallowRef


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

修改前:

 

 

 

 

修改后:

发现视图更新了,这是为什么呢?

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

 

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

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

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

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

标签:p1,修改,shallowReactive,更新,响应,视图,shallowRef
来源: https://www.cnblogs.com/s-w-f/p/16589138.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有