哈喽大家好呀!今天我们来讲讲Vue中一个很常见也令人头疼的错误——TypeError:Cannotreadproperty’XXX’ofnull。乍一看是不是觉得太复杂了?不怕，我会用最简单明了的话解释给你听，还有两个超级管用的解决办法。
这个”TypeError:无法读取属性’XXX’的null”到底是啥意思，咋整？
首先得了解问题是啥！在Vue里面，咱们经常用响应式数据，数据变动了页面也能跟着变。但有时候一不小心，可能想去读取那个值为null或者undefined的变量，感觉像是要从空碗里掏糖果出来，那可真是瞎忙活！结果JavaScript就给你弹出“没办法读取到null上面的属性”的警告了。
一个常见的例子
你看，这里有个人叫person，他还有个大名叫name和好多爱好hobbies。但有时候你想要看看这人最喜欢什么爱好，例如person.hobbies[0],结果突然发现手上的person是空的null或者根本没有undefined。这时候，JavaScript老大爷就站出来说话了，”这个操作不行不能读null的0位！“这样的事儿我们平时编程时肯定遇到过，尤其是当数据混乱，比如说数据库没整好或是网络卡顿的时候。不过别担心，这种问题其实是可以避免的。
如何检查数据是否为null或undefined
怎么样才能避免这种情况发生？最关键的就是不能让你的数据成为”Undefined（未定义）”那样的状态，简单来说就是不能是空值。尽管这听起来很容易，但是在实际操作中还真的需要多加小心。我们可以通过用if语句判断下data是否存在来解决这个问题。例如，如果你想访问person.hobbies[0]，那么必须保证person不是null也不是“没有定义”的情况。
使用条件运算符处理异常
老是用if语句查来查去太麻烦？别急别急，咱们这儿有个超好用的法宝——条件运算符！如果你想要去获取某个值，却怕对象是空的怎么办？比如“person?person.hobbies[0]:”，碰到person没定义这种情况，这个表达式会直接给你“none”，以后再也不怕程序Over了~
在Vue模板中使用v-if或v-show指令
用Vue模板的话，你能用v-if跟v-show这俩方法来决定哪些地方该不该露面儿。这样一来，就算访问到可能会是空的东西也不怕出错~
利用Vue的计算属性处理默认值
在Vue里，computed运算符超好用！咱们能用它设定初始值或者检查数据合不合格。这么一来，无论原始数据有没有准备好，咱们用这个属性都能得到正确结果，避免出错~
return this.person && this.person.hobbies ? this.person.hobbies[0] : 'none';
总结与建议
遇到“读取null属性时出错：无法读取’XXX’”这种问题时，第一件事就是看看这个变量到底有没有。然后就用if条件判断，或者v-if/v-show语法，或者给它设个默认值啥的，这样就确保数据没问题了，也不怕出现错误。这样咱们的应用运行起来会更加稳定！
最后，大家有没有遇到过类似问题的？可以聊聊，跟我们分享一些解决方法。记得来评论区说说话~另外，别忘了给这篇文章点点赞和分享给你的小伙伴。
评论0