vue如何实现数据加载
数据绑定与响应式更新
Vue 通过响应式系统实现数据加载与渲染。在 data 或 setup 中定义初始数据，模板中通过插值表达式 {{ }} 或指令（如 v-bind）绑定数据。数据变化时，视图自动更新。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: '初始数据'
};
}
};
</script>异步数据加载
使用生命周期钩子（如 created 或 mounted）或组合式 API 的 onMounted 加载异步数据。常见方式包括 fetch、axios 或 async/await。
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(async () => {
const response = await fetch('https://api.example.com/data');
data.value = await response.json();
});
return { data };
}
};
</script>状态管理与全局数据
复杂应用可通过 Vuex 或 Pinia 管理全局状态。定义 store 集中处理数据加载逻辑，组件通过 mapState 或 useStore 访问数据。
// Pinia 示例
import { defineStore } from 'pinia';
export const useDataStore = defineStore('data', {
state: () => ({ items: [] }),
actions: {
async fetchData() {
this.items = await fetchDataFromApi();
}
}
});加载状态与错误处理
添加 loading 和 error 状态提升用户体验。结合 v-if 或 Suspense（Vue 3）处理加载中和错误场景。
<template>
<div v-if="loading">加载中...</div>
<div v-else-if="error">{{ error }}</div>
<div v-else>{{ data }}</div>
</template>
<script>
export default {
data() {
return { loading: true, error: null, data: null };
},
async created() {
try {
this.data = await fetchData();
} catch (err) {
this.error = err.message;
} finally {
this.loading = false;
}
}
};
</script>性能优化
- 懒加载：路由懒加载（
import()动态导入）减少初始负载。 - 分页/无限滚动：分批加载数据，避免一次性请求过多。
- 缓存策略：利用
keep-alive或本地存储（如localStorage）缓存已加载数据。
// 路由懒加载示例
const Home = () => import('./views/Home.vue');
