解决Vue 在Mounted下拿不到原生DOM问题

今天项目遇到一个很迷惑的问题：在Mounted生命周期下使用getElementById 拿不到DOM，一直报错。

在Template中，并没有特别大的语法问题，起初我以为是Vue3版本问题，因为在Vue2中这是可行的。

  mounted() {
    if(cookie.get('user') != '' && cookie.get('user') != undefined){
      this.bool_login = true;
    }else{
      window.location = './login'
    }

    let dropArea = document.getElementById('drop-area')
    console.log(dropArea)
  }

为了测试，mounted中我们输出一下，结果如下图。

很明显返回null，这个问题解决方案也很简单。

<template>
  <div class="helloFrame">
    <div class="homeFrame">
      <CheckOutlined style="font-size:36px;"/>
      <p>您已登录，请从上方菜单进行操作。</p>
      <div class="homeMenu">
        <p>或</p>
        <p>上传新文件</p>
        <br>
        <div id="drop-area">
          <FileAddFilled style="font-size:72px;padding:8px;border:2px dashed #EEE;border-radius:10px;" />
        </div>
      </div>
    </div>
  </div>
</template>

对比上方代码，其实很难发现有改动，其实影响拿不到原生DOM的根本原因，就是v-if，因为使用了判断，导致mounted拿不到原生DOM，因为若bool_login改变，可能不会显示。

最后问题解决。在mounted下拿不到原生DOM，可以考虑template中各种元素，是否使用了v-if等判断。