javascript - this.$nextTick 的用途是什么？

Question

我是 Vue js 新手，我试图理解方法中使用 nextTick 的逻辑。所以我有两个这样的组件:

IsTuruIslem.vue

<template>
...
  <t-row>
      <is-turu-islem-goruntule ref="isTuruIslemGoruntule" 
                              @kaydet="kaydet" 
                              @guncelle="guncelle">
      </is-turu-islem-goruntule>
    </t-row>
...
</template>
<script>
...
    isTuruIslemPopupAc(detay) {
      if (!detay) this.$refs.isTuruIslemGoruntule.open();
      else {
        let guncellenecekDetay = JSON.parse(JSON.stringify(detay));
        console.log("Popup:", guncellenecekDetay);
        this.$refs.isTuruIslemGoruntule.open({
          isUpdate: true,
          detay: guncellenecekDetay
        });
      }
    }
...
</script>

IsTuruIslemGoruntule.vue

<template>
...
<t-row>
      <t-col :span="20">
        <t-select
          id="sirket"
          ref="sirket"
          label="Şirket *"
          v-model="detay.sirket"
          item-value="id"
          item-text="aciklama"
        />
      </t-col>
    </t-row>
    <t-row>
      <t-col :span="20">
        <t-select
          id="cmb_durum"
          ref="durum"
          label="Durum"
          itemText="text"
          itemValue="id"
          v-model="detay.durumBaseDTO"
          :readonly="false"
          :clearable="true"
          :disabled="false"
        />
      </t-col>
....
</template>
<script>
...
methods: {
    open: function(options) {
      this.isOpen = true;
      if (options) {
        this.isUpdate = true;
        this.detay = JSON.parse(JSON.stringify(options.detay));
      } else {
        this.detay = {};
      }
      //this.$nextTick(() => {
      this.$refs.durum
        .get("/ytts/api/common/durumlar/aktifPasif", null)
        .then(data => {})
        .catch(err => null);

      this.$refs.islem
        .get("/ytts/api/tanimYonetimi/isTuruIslem/sorgula/islemListesi")
        .then(data => {})
        .catch(err => null);

      this.$refs.sirket
        .get("/ytts/api/tanimYonetimi/isTuruIslem/sorgula/sirketListesi")
        .then(data => {})
        .catch(err => null);
      //});
      //console.log("DETAY:", this.detay);
    },
...
</script>

我的问题是本示例中的代码无法正常工作，并且我在 this.$refs.durum 存在的行处收到“无法读取未定义的属性'get'”。但是当我取消注释位于 this.$refs.durum 顶部的 nextTick 方法时，它神奇地起作用了。我真的不明白这个用法。有人可以清楚地向我解释吗？感谢您的关注。

Answer 1

如果<t-select ref="durum">未创建组件(例如，通过使用 v-if )然后 this.$refs.durum不会存在。

假设您使用类似 v-if="show" 的内容与 show设置为 false 以控制该组件的创建。如果在您的方法中设置 show设置为true，那么一旦你这样做，组件就不会被创建，你必须等到Vue更新了DOM(这是一个性能问题)。为此，您需要使用$nextTick等到那个时候，组件才会被创建，this.$refs.durum将会存在。

您还没有提供所有代码，所以我不能肯定地说，但看起来可能是isOpen正在控制该组件的可见性。