Vue组件未渲染时mounted钩子仍执行致报错问题求助

问题根源 #

核心问题在于组件挂载时机的判断延迟：

• app.vue 中 cookie 初始值为空字符串，页面初始化时 v-if="cookie==''" 条件成立，login 组件会被优先挂载，触发其 mounted 钩子。
• 虽然 app.vue 的 mounted 钩子会更新 cookie 值，但此时 login 组件的 mounted 代码已经执行完毕，后续组件被销毁也无法回滚已执行的 DOM 操作（比如查找 canvas），导致报错。
• 刷新页面时，同样因为 cookie 初始值为空，login 组件会短暂挂载触发 mounted，之后才更新 cookie 并销毁组件，错误因此持续出现。

解决方案 #

1. 提前初始化cookie值，避免组件无效挂载

直接在 app.vue 的 data 初始化阶段获取 document.cookie，跳过 mounted 钩子的延迟，确保页面渲染时 v-if 条件直接基于实际的 cookie 状态：

<template>
  <div v-if="cookie==''">
     <login @login="login"></login>
  </div>
  <div class="main_window" v-else>
     Some text
  </div>
</template>
<style>
</style>
<script>
  import login from "@/views/login";
export default {
    data() {
       return { 
         cookie: document.cookie  // 直接初始化，消除判断延迟
       } 
       },
    methods:{
       login(authData) {
         // 处理登录逻辑，设置cookie后更新当前状态
         document.cookie = "auth_token=xxx"; // 示例：设置登录cookie
         this.cookie = document.cookie;
       }
       },
}
</script>

2. 在login组件中增加DOM存在性校验

即使组件被意外挂载，也要确保操作 DOM 前先检查元素是否存在，避免报错；同时改用 Vue 的 ref 替代原生 DOM 查找，更符合框架逻辑：

<template>
  <div class="login-panel">
    <input type="text" :placeholder="palceholders.login" @input="takeInputedLogin($event.target.value)">
    <br>
    <input type="password" :placeholder="palceholders.pass" @input="takeInputedPass($event.target.value)">
    <br>
    <button v-if="authData.login.length>6 && authData.pass.length>5" @click="tryToEnter" >
      телепортация
    </button>
  </div>
  <canvas ref="particleCanvas" id="particle-canvas"></canvas>
</template>
<script>
export default {
  name: "login",
  async mounted(){
    // 用ref获取元素，先校验存在性
    const canvas = this.$refs.particleCanvas;
    if (!canvas) {
      console.log("Canvas元素不存在，跳过动画初始化");
      return;
    }
    // 这里编写你的动画初始化代码
    console.log("开始初始化粒子动画");
  },
  data(){
    return{
      palceholders:{"login":"Name","pass":"Password"},
      authData:{"login":"","pass":""},
    }
  },
  methods:{
    takeInputedLogin(value){
      this.authData.login=value;
    },
    takeInputedPass(value){
      this.authData.pass=value;
    },
    tryToEnter(){
      this.$emit("login",this.authData);
    },
  }
}
</script>
<style scoped>
</style>

注意：原代码中 input 标签写法有误（多余闭合标签），且原生 input 无 inputEvent 事件，已修正为标准的 @input 事件绑定。

补充说明 #

• 避免在 Vue 中直接使用 document.getElementById，优先用 ref 获取 DOM 元素，既能适配组件的生命周期，也能减少无效的 DOM 操作。
• app.vue 中的 async mounted 属于冗余写法，document.cookie 是同步获取的，不需要异步处理。

内容的提问来源于stack exchange，提问作者Константин