每次用Vue弄东西，老碰到”TypeError:cannotreadproperty’$XXX’ofnull”的问题，像个会爆炸的炸弹，随时可能让你的代码玩完。今天我们就来聊聊这个烦人的家伙，看看它到底是什么鬼，为啥总是找Vue用户麻烦。
错误背后的真相
这就像我们去超市没带钱包手机，啥也不能买！在Vue中同样道理，想访问个不存在的属性却找不到，那可真是抓狂了！所以说，看看是不是你的数据出了错，就跟出门忘了带东西一样平常。
数据绑定的误区
用Vue时，常用到{{}}这玩意儿来连接数据。虽然好看，但如果里面空荡荡的那也没意思比如查询不到的数据属性，那就瞎了！所以得小心点儿，确认绑定好的数据对象没问题，属性确实属于它才行！
组件生命周期的陷阱
Vue组件里的那啥生命周期钩子函数，好像每天按照固定的进度工作，每个步骤都得做得妥当。如果咱在哪个钩子函数里瞎耗功夫找啥不存在的东西，那可是大问题！所以下次看到谁用$XXX生命周期钩子函数，可得仔细瞅瞅人家是不是搞错了。比如说，有人可能会在created钩子函数里找那些还没来得及设置的数据，那肯定是出岔子！
异步操作的隐患
怎么回事，Vue不就处理点等待同步或者异步操作吗？比如用AJAX或者给setTimeout上点手脚这种事。想尽快得知问题答案的话，Vue就能派上大用场了——它还有诸如async/await或者Promise这样的神器辅助，轻轻松松搞定这一切~
v-if指令的妙用
搞定这个问题soeasy只要用v-if就行了，大概就是像个入门级的闯关游戏那样，符合要求才能往前走。只需将v-if=”property”放到要查找的地方，就能确保只会检查存在的属性，是不是很棒？
确保DOM渲染完成
说来说去，看电影当然要看完画面，对？访问正在渲染的DOM也不行！不过Vue里有个$nextTick，可以解决这个问题。它会等你看过所有DOM后，再来执行回调函数嘛～
总结与反思
碰到那个叫“TypeError:Cannotreadproperty’$XXX’ofnull”的Vue过错？别担心嘛!可能是你的代码绑定变量,用到生命周期钩子函数执行异步操作时，或者是写了不合适的v-if指令．找到问题所在修好它就能解决了，以后就不会再害怕这个错误提示，而且也能让你的app用起来更稳妥更流畅哟~
评论0