时间戳

首页 > 解决方案 > this.$refs 或 document 在mounted() 中不可见，除非我使用 setTimeout

javascript - this.$refs 或 document 在mounted() 中不可见，除非我使用 setTimeout

问题描述

我有一个奇怪的问题。我认为$refs可以从mounted()生命周期中获得

但是，如果我尝试log直接它是我未定义的对象：

mounted() {
    // logs undefined
    console.log(
      this.$refs.tabsMenu
    ) 
}

等待 1ms 后，它被定义，我可以得到对象

mounted() {
    setTimeout(() => {
      // logs the object
      console.log(
          this.$refs.tabsMenu
      )
    }, 1) // <-- just 1ms!
}

对此有什么想法吗？

我的（简化的）模板看起来像这样

<template>
  <div>
    <baseContainer>
      <ul ref="tabsMenu" id="tabs-menu" class="flex-inline flex w-full">
        <li>Home</li>
        <!-- many more items -->
        <li>Contact</li>
      </ul>
     </baseContainer>
  </div>
</div>

标签： javascriptvue.jssettimeoutlifecycle

解决方案

那是因为mounted()不保证 DOM 已经完成渲染。您将需要等待this.$nextTick()：

mounted() {
    this.$nextTick(() => {
        console.log(this.$refs.tabsMenu) 
    });
}

为您工作的原因setTimeout(callback, 1)是因为您本质上是将回调（在您的代码中，访问引用并将其记录到控制台）推迟到调用堆栈的末尾，这是 DOM 完成渲染的时间。

如果你熟悉使用 async/await，你也可以这样做：

async mounted() {
    await this.$nextTick();
    console.log(this.$refs.tabsMenu);
}

更新：看起来您的ref元素实际上包含在另一个 VueJS 组件<baseComponent>中。在这种情况下，监听this.$nextTick()父/消费组件是不够的，因为它不能保证内部组件被安装和渲染。

如果您仍然需要使用这种方法，那么我唯一的建议是确保内部<baseComponent>在安装并且其 DOM 已被渲染时发出某种事件，例如通过发出ready事件：

// Inside baseComponent
mounted() {
    this.$nextTick(() => {
        this.$emit('ready');
    });
}

然后，在您的父组件中，您可以这样监听事件：

<baseContainer v-on:ready="onReady">
  <ul ref="tabsMenu" id="tabs-menu" class="flex-inline flex w-full">
    <li>Home</li>
    <!-- many more items -->
    <li>Contact</li>
  </ul>
</baseContainer>

然后在组件的代码中：

methods {
    onReady: function() {
        console.log(this.$refs.tabsMenu);
    }
}

推荐阅读