Javascript 为什么Vue/JS变量只有先记录到控制台后才设置/正确？

我有一个非常简单的Vue JS单文件组件，在它的挂载钩子中，我试图获得其中一个元素的偏移量（使用REF）：

如果我取消第2行的注释并将值记录到控制台，那么在两个日志输出中都是正确的（在我们的例子中是127）。然而，第二行被注释掉后，它总是0。有什么想法吗

这是模板。这有点复杂，因为我们正在拉入一个图像并使用一个名为：

主菜单
我的头衔
账户
基本环节

---

更新：好的，我们已经把这个隔离了一点，但是仍然没有最终的解决方案。似乎是我们删除了横幅图像，这是预期的工作。因此，我们假设img src中的http是异步的，并在完成之后和获得其偏移量之后向下移动ttb ref元素。有什么办法吗？

好的-我们已经解决了这个问题，下面就是我们所做的。我们将滚动位置的检查移动到img加载事件中调用的方法：

<div class="banner">
  <!-- MOVED CHECK TO getScroll METHOD CALL FROM IMG LOAD -->
  <img
    @load="setScroll"
    class="center responsive"
    alt="banner"
     src="http://localhost:8000/api/apec2018/banner"
   />
 </div>

---

我已经试过你的案子了。很好用。我可以看看你的模板和ttb组件吗

<template>
  <q-layout view="hhh Lpr lFf">
    <q-layout-header>
      <div class="primary">
        <img
          class="center responsive"
          alt="banner"
          src="http://someserver/api/banner"
        />
      </div>
      <q-toolbar ref="ttb"  //HERE IS THE TTB REF
        color="primary"
        :inverted="$q.theme === 'ios'"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
          <q-tooltip>
            Main Menu
          </q-tooltip>
        </q-btn>
        <q-toolbar-title class="flex flex-center">
          My Title
          <!--<div slot="subtitle">Powered by ePapers</div>-->
        </q-toolbar-title>
        <q-btn flat round dense icon="fas fa-user">
          <q-tooltip>
            Account
          </q-tooltip>
        </q-btn>
      </q-toolbar>

    </q-layout-header>

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
      <q-list
        no-border
        link
        inset-delimiter
      >
        <q-list-header>Essential Links</q-list-header>
        <q-item @click.native="openURL('http://quasar-framework.org')">
          <q-item-side icon="school" />
          <q-item-main label="Docs" sublabel="quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://github.com/quasarframework/')">
          <q-item-side icon="code" />
          <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
        </q-item>
        <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
          <q-item-side icon="chat" />
          <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
        </q-item>
        <q-item @click.native="openURL('http://forum.quasar-framework.org')">
          <q-item-side icon="record_voice_over" />
          <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://twitter.com/quasarframework')">
          <q-item-side icon="rss feed" />
          <q-item-main label="Twitter" sublabel="@quasarframework" />
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<div class="banner">
  <!-- MOVED CHECK TO getScroll METHOD CALL FROM IMG LOAD -->
  <img
    @load="setScroll"
    class="center responsive"
    alt="banner"
     src="http://localhost:8000/api/apec2018/banner"
   />
 </div>

methods: {
  getScroll () {
    let h = document.getElementById('ttb')
    let scrollPos = h.offsetTop
    console.log(scrollPos)
  }
}