Vue3页面数据加载延迟的问题分析和解决方法

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>
  );
});

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>
  );
});

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>
  );
});

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']; // 确保重新赋值触发响应式
    }, 1000);
  };
  fetchList();
  return () => (
    <div>
      <ul>
        {state.list.length > 0 ? state.list.map((item) => <li>{item}</li>) : '加载中...'}
      </ul>
    </div>
  );
});

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>
  );
});

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>
  );
});

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>
  );
});

import { defineComponent, ref, watch } from 'vue';
export default defineComponent(() => {
  const data = ref<string | null>(null);
  setTimeout(() => {
    data.value = 'Hello, Vue!';
  }, 2000);
  // 监听数据变化并更新额外逻辑
  watch(data, (newVal) => {
    console.log('数据更新为:', newVal);
  });
  return () => (
    <div>
      <p>{data.value || '加载中...'}</p>
    </div>
  );
});