使用Vue 3实现无刷新数据加载

在现代Web应用中，流畅的用户体验至关重要。用户希望在浏览网页时可以快速看到更新数据，而不需要手动刷新页面。借助Vue 3的响应式系统和Composition API，我们可以轻松实现这一点。本文将介绍如何使用Vue 3的setup语法糖来实现无刷新数据加载功能。

为什么选择Vue 3？

Vue 3引入了许多新特性，如性能提升、Composition API，以及更好的类型支持。setup函数允许更灵活地管理组件的响应式状态和逻辑，它比传统的选项式API更加简洁和高效，尤其是在处理状态管理和数据加载时。

项目准备

在开始之前，确保已安装Node.js和Vue CLI。通过以下命令创建一个新的Vue 3项目：

vue create vue3-data-load

选择默认配置后，进入项目目录并启动开发服务器：

cd vue3-data-load
npm run serve

基本结构

接下来，我们在src目录下创建一个新组件DataLoader.vue。以下是组件的基本结构：

<template>
  <div>
    <h1>无刷新数据加载</h1>
    <button @click="loadData">加载数据</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([]);

const loadData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    items.value = data.slice(0, 10); // 仅显示前10个项目
  } catch (error) {
    console.error('数据加载失败:', error);
  }
};
</script>

<style scoped>
h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

button {
  margin-bottom: 20px;
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f9f9f9;
  margin: 5px 0;
  padding: 15px;
  border-radius: 5px;
}
</style>

代码解析

模板部分：定义了一个按钮和一个列表。当用户点击按钮时，调用loadData函数发起API请求获取数据，并将其显示在列表中。
脚本部分：
- items使用ref定义为一个响应式数组，用于存储API返回的数据。
- loadData是一个异步函数，负责发起HTTP请求获取数据，并将其赋值给items，然后自动更新页面视图。
样式部分：简单的CSS样式，提升界面美观度。

运行效果

在浏览器中打开应用时，用户可以看到一个按钮“加载数据”。点击按钮后，应用将无缝加载来自API的数据，并在页面上显示结果，而不需要刷新页面。

增加加载状态指示器

为了提升用户体验，我们可以添加一个加载状态指示器，显示数据加载进度。修改后的代码如下：

<template>
  <div>
    <h1>无刷新数据加载</h1>
    <button @click="loadData" :disabled="loading">{{ loading ? '加载中...' : '加载数据' }}</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([]);
const loading = ref(false);

const loadData = async () => {
  loading.value = true;
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    items.value = data.slice(0, 10);
  } catch (error) {
    console.error('数据加载失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

在这段代码中，我们新增了一个loading状态，用于指示当前是否在加载数据。当数据正在加载时，按钮会显示“加载中...”并被禁用，加载完成后恢复为“加载数据”。