Vue中使用getElementById结果返回元素为null ？

浅浅的花香味﹌ 2021-07-27 00:30 970阅读 0赞

# 【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？ #

### 文章目录 ###

*  【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？
 *   *  在created()中使用getElementById
     *  mounted()中使用getElementById
     *  created()中结合this.$nextTick()实现业务需求
     *   *  总结

*  首先，我在项目中用这样一个需求，根据客户端屏幕尺寸动态计算主体区域的高度。

拿到这个需求，我第一想法是通过`element.getBoundingClientRect`获取固定元素的尺寸，然后通过`document.body.offsetHeight`获取可视区域的高度，最终动态计算主体区域的大小。

## 在created()中使用getElementById ##

确定思路之后便开始动手coding,于是我在created中写了如下代码：

//此处省去无关代码
    created() { 
    	let serachBox = document.getElementById('searchBox');
    	let searchRect = serachBox .getBoundingClientRect();
    	console.log('rect',searchRect );
    	let dffsetHeight = document.body.offsetHeight;
    	this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );
    },

结果控制台直接报错了，报错如下  
![错误详情][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center]        根据报错描述，我又向上打印了`searchBox`元素，这时控制台打印结果为`null`，这就有点意思了。

## mounted()中使用getElementById ##

仔细一看原来是我将`getElementById`用在了created()钩子函数中，这时Vue尚未完成挂载，也就不能通过`getElementById`获取Dom元素，故而控制台打印`null`。找到原因之后我将上述代码迁移到`mounted()`钩子函数中，这时控制台打印出正确结果。  
![正确结果][20200331181029655.PNG_pic_center]  
虽然问题找到了，但是页面的渲染结果却不能满足我的需求。还得继续寻找办法。

## created()中结合this.$nextTick()实现业务需求 ##

最终**created()中结合this.$nextTick()实现业务需求**最终代码如下：

created() { 
    	this.$nextTick(function () { 
    		let serachBox = document.getElementById('searchBox');
    		let searchRect = serachBox .getBoundingClientRect();
    		console.log('rect',searchRect );
    		let dffsetHeight = document.body.offsetHeight;
    		this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );
    	 })
    },

### 总结 ###

本次bug主要是两个方面导致。

1.  一是习惯性的在created钩子函数中处理业务逻辑
2.  二主要还是对Vue的生命周期不够熟悉，犯了迷糊。  
    对Vue生命周期还不熟悉的同学请点此传送：[Vue生命周期图示][Vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/5ecd2f1865324df28f2d9215f61a30cd.png
[20200331181029655.PNG_pic_center]: /images/20210726/72326e988c4c4977b5beffbee6e5445d.png
[Vue]: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90