Vue.js 本身并不直接处理服务器端数据预取（Server-Side Data Fetching），这通常涉及到在服务器端（可能是一个 Node.js 应用、API 服务器或其他后端服务）预先获取数据，并在页面加载时将其传递给 Vue.js 客户端。
以下是一个简单的例子，展示了如何使用 Vue.js 与服务器端 API 交互，实现数据的预取。
服务器端
假设你有一个简单的 Express.js 服务器端应用，它提供了一个 API 端点来返回一些数据：
javascript
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
// ...更多数据
];
res.json(data);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
客户端（Vue.js）
在 Vue.js 客户端，你可以使用 created 或 mounted 生命周期钩子来调用 API 并获取数据。这里是一个简单的 Vue 组件示例：
vue
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: [],
};
},
async created() {
try {
const response = await axios.get('http://localhost:3000/api/data');
this.items = response.data;
} catch (error) {
console.error('Error fetching data:', error);
}
},
};
</script>
在这个例子中，我们使用了 axios 库来发送 HTTP 请求。当组件被创建时，created 钩子会调用 API，并将返回的数据存储在 items 数据属性中。然后，这些数据可以在模板中通过 v-for 指令进行渲染。
注意事项
错误处理：在实际应用中，你需要妥善处理可能出现的错误，比如网络错误、API 错误等。在这个例子中，我们简单地使用 console.error 来记录错误，但在生产环境中，你可能需要更复杂的错误处理策略。
性能优化：对于大型应用或复杂的数据结构，你可能需要考虑使用更高级的数据预取策略，比如使用 Vuex 进行状态管理，或者使用 Nuxt.js 等框架提供的服务器端渲染（SSR）或预渲染功能。
安全性：确保你的 API 端点是安全的，并且只允许授权的用户访问。使用适当的身份验证和授权机制来保护你的数据。