Vue3 实现刷新页面局部内容的方法

在Vue3开发中，有时我们需要仅刷新页面的局部内容，而非整个页面，这能有效提升用户体验与应用性能。下面将介绍几种常见的实现方法。

使用 v-if 指令是一种简单直接的方式。v-if 会根据表达式的真假来渲染或销毁元素及其子组件。当我们需要局部刷新时，只需切换控制 v-if 的变量值。例如，有一个展示用户信息的组件：

<template>
  <div>
    <div v-if="showUserInfo">
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
    </div>
    <button @click="refreshUserInfo">刷新用户信息</button>
  </div>
</template>

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

const showUserInfo = ref(true);
const user = ref({ name: '张三', age: 25 });

const refreshUserInfo = () => {
  showUserInfo.value = false;
  // 模拟获取新数据
  setTimeout(() => {
    user.value = { name: '李四', age: 30 };
    showUserInfo.value = true;
  }, 1000);
};
</script>

点击按钮时，先将 showUserInfo 设为 false 销毁组件，获取新数据后再设为 true 重新渲染，实现局部刷新。

provide 和 inject 配合响应式数据也能达成目的。在父组件中定义响应式数据并通过 provide 提供，子组件使用 inject 注入。当响应式数据变化时，子组件局部更新。

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const sharedData = ref({ message: '初始信息' });

provide('sharedData', sharedData);

const updateData = () => {
  sharedData.value.message = '更新后的信息';
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ sharedData.message }}</div>
</template>

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

const sharedData = inject('sharedData');
</script>

点击按钮更新 sharedData 时，子组件局部内容随之刷新。

还可使用 reactive 与 watchEffect 组合。reactive 创建响应式对象，watchEffect 自动追踪依赖并在依赖变化时执行回调。

掌握这些Vue3实现局部刷新的方法，能让开发者根据具体场景灵活选择，优化应用性能，打造更流畅的用户体验。