前几天写了一个知识库的单体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元素测试结果: