Vue3頁面數據加載延遲的問題分析和解決方法

更新時間：2024年11月20日 10:12:15 作者：代碼里的小貓咪

在?Vue?3?的項目中,當我們使用響應式數據（如?ref?或?computed）來管理頁面狀態(tài)時,可能會遇到由于接口數據加載延遲,導致頁面初始渲染時數據尚未獲取完成的問題,本文針對此問題簡單分析了原因和解決方法,需要的朋友可以參考下

1. 問題描述

在 Vue 3 的項目中，當我們使用響應式數據（如 ref 或 computed）來管理頁面狀態(tài)時，可能會遇到由于接口數據加載延遲，導致頁面初始渲染時數據尚未獲取完成的問題。這會導致頁面在數據未更新的情況下提前渲染出來，從而產生顯示錯誤或不完整的內容。

針對此問題簡單分析下原因和解決方法。

1、Vue 響應式系統(tǒng)的工作機制

Vue 3 的響應式系統(tǒng)基于 Proxy 實現，通過 reactive、ref 或 computed 等 API 來響應數據的變化。當數據變化時，Vue 會自動重新渲染與這些數據綁定的 DOM 元素。但是，如果數據在初始渲染時為空或未加載，Vue 會將頁面渲染為初始狀態(tài)，直到數據加載完畢并觸發(fā)響應式更新。

假設存在一個 ref 類型的響應式數據 data，在組件加載時該數據為空，且需要從接口獲取數據。

import { defineComponent, ref, onMounted } from 'vue';
 
export default defineComponent(() => {
  const data = ref(''); // 初始值為空
 
  onMounted(async () => {
    // 模擬延遲獲取接口數據
    await new Promise((resolve) => setTimeout(resolve, 3000));
    data.value = '已加載的數據'; // 設置接口返回的數據
  });
 
  return () => (
    <div>
      <p>{data.value ? data.value : '加載中...'}</p>
    </div>
  );
});

效果：組件渲染時，data.value 為 null，所以會展示加載中...，3秒之后，數據才被加載，頁面才會更新。

2、異步加載時的頁面閃爍與內容不一致

接口請求需要時間，頁面初始渲染會先使用默認數據或空值進行渲染。數據加載完成后，頁面可能會發(fā)生更新，導致用戶看到的內容短暫不一致或發(fā)生閃爍。

2. 解決方法

1、手動觸發(fā)頁面更新

如果響應式數據未觸發(fā)渲染，可以嘗試使用 nextTick 或通過直接重新賦值觸發(fā)更新。

import { defineComponent, ref, nextTick } from 'vue';
export default defineComponent(() => {
  const message = ref<string | null>(null);
  const updateMessage = async () => {
    setTimeout(() => {
      message.value = 'Hello, Vue!';
      nextTick(() => {
        console.log('視圖已更新');
      });
    }, 1000);
  };
  updateMessage();
  return () => (
    <div>
      <p>{message.value || '加載中...'}</p>
    </div>
  );
});

2、使用占位符避免初次渲染閃爍

在初次加載數據前，渲染占位符或骨架屏，確保用戶體驗。

import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
  const loading = ref(true);
  const data = ref<string | null>(null);
  setTimeout(() => {
    data.value = '接口數據加載完成';
    loading.value = false;
  }, 2000);
  return () => (
    <div>
      {loading.value ? (
        <p>加載中...</p>
      ) : (
        <p>數據：{data.value}</p>
      )}
    </div>
  );
});

3、異步邏輯補充響應式支持

在異步接口中獲取數據后，直接調用 Vue 提供的響應式 API 來強制觸發(fā)更新。

import { defineComponent, reactive } from 'vue';
export default defineComponent(() => {
  const state = reactive({
    list: [] as string[],
  });
  const fetchList = async () => {
    setTimeout(() => {
      state.list = ['Item 1', 'Item 2', 'Item 3']; // 確保重新賦值觸發(fā)響應式
    }, 1000);
  };
  fetchList();
  return () => (
    <div>
      <ul>
        {state.list.length > 0 ? state.list.map((item) => <li>{item}</li>) : '加載中...'}
      </ul>
    </div>
  );
});

4、使用 watch 監(jiān)聽數據變化并在更新時執(zhí)行額外的邏輯。

import { defineComponent, ref, watch } from 'vue';
export default defineComponent(() => {
  const data = ref<string | null>(null);
 
  watch(data, (newVal) => {
    console.log('數據已更新：', newVal);
  });
 
  setTimeout(() => {
    data.value = 'Hello, World!';
  }, 1000);
 
  return () => (
    <div>
      <p>{data.value || '加載中...'}</p>
    </div>
  );
});

關鍵點：

1、確保使用響應式對象或變量，并在賦值時考慮 Vue 響應式系統(tǒng)的特點。

2、如果頁面更新異常，可使用 nextTick 或 watch 來確保觸發(fā)渲染。

3、提前處理數據加載占位，優(yōu)化用戶體驗。

3. 新的疑惑

可能會出現一個困惑：

為什么使用 ref 的響應式數據在頁面渲染后獲取后，不直接更新頁面，而必須放在 watch 里面呢？

ref 的響應式數據本身是具有更新頁面的能力的，但如果在頁面渲染后會發(fā)現數據更新未觸發(fā)視圖變化，可能是由于以下幾個原因導致的：

1、頁面未綁定響應式數據

如果在模板或渲染函數中，數據未綁定到 DOM 或組件中，Vue 的響應式系統(tǒng)就不會知道該數據的變化需要觸發(fā)視圖更新。

import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
  const data = ref<string | null>(null);
  setTimeout(() => {
    data.value = '新數據'; // 更新數據
  }, 2000);
  return () => (
    <div>
      {/* 沒有直接使用 data.value */}
      <p>數據加載完成！</p>
    </div>
  );
});

示例中，雖然 data.value 被更新了，但它并未綁定到頁面上，因此頁面沒有感知到需要重新渲染。為了解決這個問題，需要確保將數據綁定到視圖中：

import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
  const data = ref<string | null>(null);
  setTimeout(() => {
    data.value = '新數據'; // 更新數據
  }, 2000);
  return () => (
    <div>
      <p>{data.value || '加載中...'}</p>
    </div>
  );
});

2、數據賦值操作不當

當從接口獲取數據后，不正確的賦值操作，也可以造成響應式數據未更新導致的。

3、為什么放到 watch 中能解決？

watch 的作用是監(jiān)聽響應式數據的變化并執(zhí)行相應的副作用邏輯。即使數據更新沒有直接綁定到視圖，watch 可以保證代碼邏輯在數據變化時被觸發(fā)。

import { defineComponent, ref, watch } from 'vue';
export default defineComponent(() => {
  const data = ref<string | null>(null);
  setTimeout(() => {
    data.value = 'Hello, Vue!';
  }, 2000);
  // 監(jiān)聽數據變化并更新額外邏輯
  watch(data, (newVal) => {
    console.log('數據更新為:', newVal);
  });
  return () => (
    <div>
      <p>{data.value || '加載中...'}</p>
    </div>
  );
});

原因：watch 主動監(jiān)聽數據變化，無論視圖是否綁定響應式數據，watch 都會響應數據變化并執(zhí)行邏輯。

以上就是Vue3頁面數據加載延遲的問題分析和解決方法的詳細內容，更多關于Vue3頁面數據加載延遲的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: