解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of

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计算属性里面就解决了，也解决了控制台报错的问题。