分析 Vue 3 页面数据加载延迟问题
1. 问题描述
在 Vue 3 的项目中，当我们使用响应式数据（如 ref 或 computed）来管理页面状态时，可能会遇到由于接口数据加载延迟，导致页面初始渲染时数据尚未获取完成的问题。这会导致页面在数据未更新的情况下提前渲染出来，从而产生显示错误或不完整的内容。
针对此问题简单分析下原因和解决方法。
1、Vue 响应式系统的工作机制
Vue 3 的响应式系统基于 Proxy 实现，通过 reactive、ref 或 computed 等 API 来响应数据的变化。当数据变化时，Vue 会自动重新渲染与这些数据绑定的 DOM 元素。但是，如果数据在初始渲染时为空或未加载，Vue 会将页面渲染为初始状态，直到数据加载完毕并触发响应式更新。
🌰
假设存在一个 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、异步加载时的页面闪烁与内容不一致
接口请求需要时间，页面初始渲染会先使用默认数据或空值进行渲染。数据加载完成后，页面可能会发生更新，导致用户看到的内容短暂不一致或发生闪烁。
2. 解决方法
1、手动触发页面更新
如果响应式数据未触发渲染，可以尝试使用 nextTick 或通过直接重新赋值触发更新。
🌰
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 来强制触发更新。
🌰
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>
);
});4、使用 watch 监听数据变化并在更新时执行额外的逻辑。
🌰
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 响应式系统的特点。
2、如果页面更新异常，可使用 nextTick 或 watch 来确保触发渲染。
3、提前处理数据加载占位，优化用户体验。
3. 新的疑惑
可能会出现一个困惑：
为什么使用 ref 的响应式数据在页面渲染后获取后，不直接更新页面，而必须放在 watch 里面呢？
ref 的响应式数据本身是具有更新页面的能力的，但如果在页面渲染后会发现数据更新未触发视图变化，可能是由于以下几个原因导致的：
1、页面未绑定响应式数据
如果在模板或渲染函数中，数据未绑定到 DOM 或组件中，Vue 的响应式系统就不会知道该数据的变化需要触发视图更新。
🌰
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 的作用是监听响应式数据的变化并执行相应的副作用逻辑。即使数据更新没有直接绑定到视图，watch 可以保证代码逻辑在数据变化时被触发。
🌰
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>
);
});原因：watch 主动监听数据变化，无论视图是否绑定响应式数据，watch 都会响应数据变化并执行逻辑。