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 正在控制该组件的可见性。