document.getElementById()偶尔返回null

1、问题现象

　　在Vue中通过document的getElementById()方法返回元素对象时，有时候遇到为null值。

2、问题分析

　　在代码中确实为目的元素指定了ID，那为何还会出现对象为null的现象呢？首先，对该ID元素的属性、样式进行分析，它是通过v-if指令来控制是否显示的，它是动态加载元素组件的，也就是说当v-if指令为false时，该ID元素是不会出现在Element树中，此时调用getElementById()方法来获取该ID元素，那么得到的值肯定会为null值；只有当v-if指令为true时才会动态异步加载该元素，如果还没有等到该元素加载完成，就立即调用getElementById()方法来获取该元素的话，那么得到的值也会为null值，只有当该元素完全加载后，再调用getElementById()方法，就不会得到null值了。

3、问题处理

　　要是在现实中的确需要用到这样的一个场景，当某个元素立即显示，同时通过ID来获取该元素时，那么此时就不能使用v-if指令了，我们可以使用v-show指令。也就是说，在代码中用v-show指令替换掉v-if指令，就不会出现getElementById()方法返回null值的问题了。其实，v-show指令是一种懒加载的处理机制。