七、后端交互
7.1 安装与基本使用
Vue本身不封装AJAX请求，推荐使用Axios库：
npm install axios
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref([]);
const loading = ref(false);
const error = ref(null);
const fetchPosts = async () => {
loading.value = true;
error.value = null;
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
posts.value = response.data.slice(0, 5); // 取前5条
} catch (err) {
error.value = '数据加载失败';
console.error(err);
} finally {
loading.value = false;
}
};
// 组件挂载后自动加载数据
onMounted(() => {
fetchPosts();
});
</script>
<template>
<div>
<button @click="fetchPosts">刷新数据</button>
<div v-if="loading">加载中...</div>
<div v-else-if="error">{
{ error }}</div>
<ul v-else>
<li v-for="post in posts" :key="post.id">
<h4>{
{ post.title }}</h4>
<p>{
{ post.body }}</p>
</li>
</ul>
</div>
</template>
7.2 拦截器与统一配置
在实际项目中，通常会对Axios进行统一配置：
// utils/request.js
import axios from 'axios';
const request = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
});
// 请求拦截器
request.interceptors.request.use(
config => {
// 添加token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
request.interceptors.response.use(
response => {
return response.data; // 直接返回数据部分
},
error => {
if (error.response?.status === 401) {
// 未授权，跳转登录页
router.push('/login');
}
return Promise.reject(error);
}
);
export default request;
八、新手常见问题与避坑指南
8.1 响应式数据注意事项
问题1：ref在模板和脚本中的使用差异
// ❌ 错误
const count = ref(0);
count++; // 报错！无法直接修改
// ✅ 正确
count.value++; // 脚本中必须使用 .value
在模板中，Vue会自动解包，可以直接使用{ { count }}；但在JavaScript中，必须通过.value访问和修改。
问题2：reactive不能直接赋值
// ❌ 错误：直接赋值会破坏响应式
let state = reactive({ user: null });
state = { user: '张三' }; // 失去了响应式
// ✅ 正确：修改属性
state.user = '张三';
// ✅ 也可以使用Object.assign
Object.assign(state, { user: '张三', age: 25 });
8.2 列表渲染的key属性
使用v-for时，务必添加:key属性，且key应使用唯一标识：
<!-- ❌ 不推荐 -->
<li v-for="item in items">{
{ item.name }}</li>
<!-- ✅ 推荐 -->
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
key帮助Vue识别哪些元素被修改、添加或移除，对渲染性能至关重要。
8.3 条件渲染：v-if vs v-show
<!-- v-if：条件不满足时不渲染 -->
<div v-if="isAdmin">管理员面板</div>
<!-- v-show：始终渲染，但通过CSS隐藏 -->
<div v-show="isVisible">始终存在的元素</div>
8.4 插值表达式闪烁问题
在使用CDN引入Vue时，页面加载时可能短暂显示{
{ message }}原始文本，这种现象称为"闪烁"。解决方案是使用v-text指令：
<!-- ❌ 可能出现闪烁 -->
<span>{
{ message }}</span>
<!-- ✅ 不会闪烁 -->
<span v-text="message"></span>
对于初学者而言，最重要的是动手实践。不要停留在阅读文档，尽快创建你的第一个Vue应用，然后逐步增加功能。随着一个个小项目的完成，你对Vue的理解会越来越深入，编写代码也会越来越得心应手。
来源：
https://app-a87ujc988w01.appmiaoda.com/
