解决新版vue3响应式数据更新后视图不渲染的问题

1 篇文章 0 订阅
1 篇文章 0 订阅

前几天写了一个知识库的单体web项目,在做登录功能的时候用户昵称这个响应式变量在登录之后死活显示不出来,要么就是只能显示一个响应变量的初始值而没有随着数据的更新而重新渲染页面,像这样:

额。。。显示在前端页面上是这样的 :

登录成功以后该显示出来的昵称没有了,后来打开前端开发者工具查看发现不仅<span>标签是display:none,而且内层的text(span中的内容user.name)也是空的,这就很搞人心态了,这也不行,那也不行,后来去网上搜了半天,也没找到合适的解决方案。。。 

后来我突发奇想的就直接把span标签去掉了,直接用外层<a>标签的属性v-text来渲染user.name,发现居然成功显示出来了:

我仅仅是把前端代码改了一丢丢,虽然问题解决了,但还是有点迷糊,要像这样我以后用vue的组件还不能嵌套着dom元素用响应式变量了?那不妥妥寄嘛。 修改后的代码:

那么后来呢我在<a-menu>外用dom元素进行测试,发现vue并不是不可以嵌套响应式,而是对于AntDesignView组件库中的元素<a-menu>仅仅只渲染其直接儿子节点的响应式数据,而对于直接儿子以外子孙节点的响应式数据都只在数据初始化时渲染一次就作为静态元素挂在到了与其相关的dom元素上。真让人头大。。。

dom元素测试结果:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值