前言

这几天写项目时,遇到了一个问题,于是就想着写篇笔记记录下来,方便以后少踩坑。

问题的描述

首先问题如下:

vue问题

然后去翻译了一下这条报错信息。

vue问题

根据他的翻译结果我也是一头雾水。索性直接复制这段报错直接去面向百度了,果然,遇到同样问题的不是我一个人。

问题的产生

根据网上大佬们的描述,之所以会报错,原因是因为在template模板在渲染的时候,DOM要读取或者要渲染的数据是数组或者对象的时候,若Object类型的数据不存在或是没有读取到,就会报这个错。
通俗说就是好比我们在一个DOM上要去读取user.userInfo[i].name的时候,这里我们要去读取用户的登录信息里面的姓名的时候,如果userInfo[i]里面没有读取到值就会报错。他会在对象或者数组内的索引第一项的时候就会报错,这也就是为什么会有'0'带出报错信息。

问题解决思路

首先我们知道模板渲染数据时,先渲染一遍默认数据,然后异步的数据会重新渲染一遍。而Vue中的渲染机制中:异步数据先显示初始数据,再显示带数据的数据。 也就是说Vue先将data里面定义的数据先渲染一边,然后接口的数据拿回来之后又会渲染一遍。而我已经提前在模板中使用了表达式,所以模板在请求的数据拿回来之前已经去渲染data中定义的空的值了,所以就会报错。

解决方法

看了网上也有相关的解决方案,

  • 写一个延时函数,让DOM延时渲染,等待接口数据回来之后再去读取数据,
  • 在具体的DOM上做判断,让DOM去读取的时候必须要让userInfo[i]这个对象或者数组必须有值再去读取也就是其length必须要大于0才去读取,否则就不去读取。

优劣性

第一个方法可以说实际开发中根本就不会被采纳,因为这样去等待造成的用户体验非常不好,而且,给延时函数定义一个值时,如果在这个值的时间内,接口的数据还没有回来,还是会一样,那接口的稳定谁又能保证呢。
第二个方法相对来说就高效很多了,毕竟也是Vue中封装好属性。

解决问题

//这里举例span标签
<span v-if="user.userInfo.length > 0">{{user.userInfo[0].name}}</span>
//这里直接去判断userInfo里面的值不为空,

** 这里还需要注意,如果同一个DOM节点上也使用了v-for,那么就要考虑两者的优先级,以及重复渲染造成的性能浪费等问题了。

补充

如果读取user.userInfo还报错的话,那我们可以在加一层判断条件。

<span v-if="user.userInfo !== undefind && user.userInfo.length > 0">{{user.userInfo[0].name}}</span>
//可以再去判断上一层是否能被找到。

泰戈尔的微信公众号

最后修改:2021 年 07 月 02 日 12 : 34 AM
本文作者:博主:    
文章标题:你的Vue控制台报错了吗
本文地址:https://www.iftiger.com/archives/86.html     
版权说明:若无注明,本文皆为“泰戈尔のBlog”原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。