哈喽！看着这个是不是挺烦人的？用Vue搞开发时，想从未知的对象属性取值，结果老是蹦出那个”TypeError:无法读取null的XXX属性”的错误提示，真是让人抓狂。其实，问题就出在我们没检查下对象是不是null或undefined就去访问了。别慌，我这就给你支个招儿解决它！
你好第一次尝试，居然连接失败了：“xxx”读不出来欸，感觉有点儿迷茫。
用Vue的时候可得小心比如你手里有个东西，视线又被挡住了。你怎么也找不到它，火急火燎地去查它的属性，但Vue就是不乐意，运气背的话，整条代码就直接玩儿完了。这下子，不仅程序崩溃，还让人心烦意乱。你说，你正在忙活，突然程序就挂了，一大堆错误提示跳出来，你能开心得了吗？
v-if和v-show：你的第一道防线
用Vue调试代码，跟玩游戏闯关似得，v-if或者v-show就相当于操作杆了。只要属性不为空，下面的代码便能运转起来。这方法最大优点就是属性为空时，模板上的东东就会消失，直接避开访问无效对象引发的错误。简单好用，效果佳！
三元表达式：灵活的条件判断
{{ obj.XXX }}
想过没有?用了v-if和v-show之外，我们还可以利用三元表达式来实现更灵活的判断呢!就是说，当访问对象属性为空时，它会自动变为默认值。这样就算对象是空的，程序也能正常运行~
可选链操作符：现代化的解决方案
赶紧升级到Vue2.0或者更高版本，试试那个新功能——备用选项链运算符。它会自动检查你想要的对象是不是空的（就是指null或者undefined），如果是的话，就默默地给你个undefined，避免让你看到烦人的错误提示。这样一来，即使数据里有空白值，你的代码也还是一样好看！
data() {
return {
obj: null
}
},
computed: {
objXXX() {
return this.obj !== null ? this.obj.XXX : 'default value';
}
}
错误处理的艺术：不仅仅是技术
修电脑不只是要技术好，还得有点”手艺”！敲代码时得想到各种可能，找出可能有问题的地方，事先准备好解决方案。这就跟编故事似的，你得先想明白每段情节怎么发展，这样整个故事才会顺畅。
总结：预防胜于治疗
碰到那啥TypeError:’XXX’ofnull不要怕！试着加个v-if或v-show限制一下，或者用三元表达式；实在不行用可选链操作符也行。代码得好好琢磨，提前预防总是好过弥补。这样以后处理这类问题就能游刃有余！
提问：你有没有遇到过类似的错误？你是如何处理的？
data() {
return {
obj: null
}
},
computed: {
objXXX() {
return this.obj?.XXX;
}
}
你也遇到过跟我一样的烦心事吗？那你都是咋解决的？快来告诉我，咱们一起进步呗！别忘了给我点赞分享，你们的支持就是我前进的动力
{{ objXXX }}
评论0