已解决Vue{{}}插值表达式中多层对象报错undefined未定义。多种可能的情况

 

在插值表达式中用到多层对象中的数值，第一次打开网页明明页面中已经渲染了item1中的数值，但是控制台报错undefined。这里讲解两种情况

一、record数据是在data中定义好的并且每一层对象都定义好对应的值

因为js是异步执行的，插值表达式加载和初始化数据同时进行，当执行到插值表达式的时候可能对象还没有初始化完成。这种情况发生的可能性比较小

二、record数据初始定义为{}空对象，在created中通过axios请求得到结果赋值的

因为axois请求是异步的，加载插值的时候axios还没有请求完成还没来得及赋值给record。此时读取body为undefined

这两种情况的发生都是因为页面在渲染插值表达式的时候里面对应的数据没有完全初始化完毕。

解决方案：

此时我们可以看到，报错的是cannt read properties of undefined reading item1，是说此时item1所在的对象为undefined，也就是body对象，此时我们可以使用非空判断，为空的时候暂时渲染空字符串

这样的话控制台就不会报错undefined了

（当然报错undefined的位置不一定就是我这里最后一个值，也有可能是中间的cannt read properties of undefined reading body或者cannt read properties of undefined reading accuracy，因为影响数据加载速度的因素有很多，可能数据加载到中间一个任何一个对象的时候插值表达式都开始解析了，这样的话我们在对应的位置灵活使用非空判断即可）

 这里扩展一个更简洁可以替代非空判断的一个语法：可选链(?.)

const obj = { 
hh:"xxx" 
} 
let res = obj?.data?.list

 在每次对象选择前加一个问号，这样的话这条对象选择链中只要有一个对象不存在他会直接返回undefined，数组的话就在需要在角标前加(?.)如let res = obj?.arr?.[2].list    此处arr不存在，会直接返回undefined。但在vue2中好像需要安装插件，具体用法大家自行看关于可选链的教学哈