1.背景

最近在项目中遇到了一个问题,控制台报错Error in callback for immediate watcher “height”: “TypeError: Cannot read properties of undefined (reading ‘style’)”,找了好久,不知道哪里的错误,最后终于解决了,于是记录一下。

控制台报错,如下所示

这个错误报得莫名其妙,既没告诉你具体位置,也没告诉你是哪里出错,页面和数据都能正常显示,于是我找啊找啊,终于知道是哪里的问题了。

2.业务场景

代码中是要给table 设置一个高度,而我在data中把height赋值为空了,具体请看下面代码

这里就涉及到vue中的生命周期函数,以及执行顺序的先后问题了。vue是先拿到data里面的数据,再去执行created和mounted里面的函数,而我把height赋值为空了,当vue拿到data里面的数据时,为空,所以就会报错,后面再执行mounted里面的高度计算方法时,也只是给height赋值。所以就会出现控制台先报错,后面渲染的时候再拿到你给它设置的高度,页面也能正常显示

这里应该把height赋值为auto,即height:“auto”,就不会报这个错误了。但是鉴于代码的优化和规范化,改了一种更加规范和简洁的方法。

优化后的方法,两步就搞定了,不需要在data里面声明了,把高度计算的函数放在computed计算属性里面就解决了,也解决了控制台报错的问题。