如何延遲Vue.js和Vuetify中的重度渲染

我正在使用 Vue.js 2 和 Vuetify 2.6，并且在擴展面板中進行了一些繁重的表單渲染。單擊面板的標題時，面板部分打開之前會有一小段延遲，因為我猜它是第一次渲染。延遲并沒有給我帶來太多困擾，但我想在初始渲染發生時立即顯示進度指示器。問題是，進度指示器僅在渲染完成后出現。但是，單擊事件會立即發生，如以下代碼段的 js 控制臺所示。

有沒有辦法延遲面板部分的渲染以首先顯示進度指示器？令人驚訝的是，在渲染發生時 UI 并未凍結，因此進度指示器影片有效。

我不能使用擴展面板“渴望”選項，因為我有很多面板并且一次加載所有內容需要太多時間。

這個代碼片段通過一個夸張的例子說明了這個問題。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    loading: false
  }),
  methods: {
    click() {
      console.log('click')
      this.loading = true
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">


<v-app id="app">
  <template>
    <v-expansion-panels>
      <v-expansion-panel @click="click">
        <v-expansion-panel-header>
          <template v-slot:default="{ open }">
            <span>
              <v-progress-circular
                v-if="loading"
                indeterminate
                size="14"
                width="2"
                color="blue"
                class="d-inline-block"
              />
            </span>
            <span>Click me! opened: {{ open }}</span>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-text-field v-for="(item, i) in 1500" :key="i" />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </template>
</v-app>

uj5u.com熱心網友回復：

問題是loading標志更改的影響（包括渲染微調器和面板內容）發生在同一個宏滴答中。

一種解決方法是將效果分成兩部分：(1) 切換loading以渲染微調器并打開面板，以及 (2) 切換新標志以渲染面板內容。這可以將第二個效果移動到下一個宏刻度中：

1. 添加一個布爾標志作為資料屬性，并使用該標志有條件地呈現面板內容。

2. 在click處理程式中，等待宏滴答（即，等待setTimeout()沒有超時）。

3. 切換步驟 1 中的標志以呈現面板內容。

<script>
new Vue({
  data: () => ({
    1??
    loadTextfields: false,
  }),
  methods: {
    async click() {
      this.loading = true
      2??
      await new Promise(r => setTimeout(r))
      3??
      this.loadTextfields = true
    }
  }
})
</script>

<v-expansion-panels>
  <v-expansion-panel @click="click">
    ?
    <v-expansion-panel-content>
                           1??
      <template v-if="loadTextfields">
        <v-text-field v-for="(item, i) in 1500" :key="i"/>
      </template>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

顯示代碼片段

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    loading: false,
    loadTextfields: false,
  }),
  methods: {
    async click() {
      console.log('click')
      this.loading = true
      await new Promise(r => setTimeout(r))
      this.loadTextfields = true
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">


<v-app id="app">
  <template>
    <v-expansion-panels>
      <v-expansion-panel @click="click">
        <v-expansion-panel-header>
          <template v-slot:default="{ open }">
            <span>
              <v-progress-circular
                v-if="loading"
                indeterminate
                size="14"
                width="2"
                color="blue"
                class="d-inline-block"
              />
            </span>
            <span>Click me! opened: {{ open }}</span>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <template v-if="loadTextfields">
            <v-text-field v-for="(item, i) in 1500" :key="i"/>
          </template>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </template>
</v-app>

標籤：javascript 表现 Vue.js Vuejs2 Vuetify.js

上一篇：是否可以從Vue路由器獲取觸發路由更改的單擊元素？

下一篇：VueJs：表單資料事件