Vue3点击按钮获取数据后响应式变量未更新模板的问题

问题场景 #

基于Vue3+Vite的应用，用于调用Google Sheets获取数据。初始代码可正常自动更新模板，但修改为用户点击按钮再获取数据后，数据已在Vue Devtools中显示，但模板未更新。

正常工作的初始代码 #

<template>
  <div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>

<script setup>
// Fetch the SS data
const { data: ssData } = useFetch(ssURL);
</script>

修改后有问题的代码 #

<template>
  <h1>Senior Options</h1>

  <button @click="getSSValues">Get Data</button>

  <div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>

<script setup>
let ssData = ref(null);

const getSSValues = () => {
    // eslint-disable-next-line no-unused-vars
    const { data } = useFetch(ssURL);
    ssData.value = data;
};
</script>

问题原因 #

useFetch返回的data是一个响应式ref对象，你直接将这个ref对象赋值给ssData.value，而非提取ref内部的实际数据。当useFetch请求完成更新内部data时，你的ssData无法感知到这个变化——因为你只是保存了ref的引用，没有建立响应式关联。

解决方案 #

方案1：通过监听同步响应式数据 #

利用watch监听useFetch返回的data变化，将新值同步到你的ssData：

<template>
  <h1>Senior Options</h1>
  <button @click="getSSValues">Get Data</button>
  <div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>

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

let ssData = ref(null);

const getSSValues = () => {
  const { data } = useFetch(ssURL);
  // 监听data的变化，同步到ssData
  watch(data, (newValue) => {
    ssData.value = newValue;
  }, { immediate: true }); // 立即执行一次，获取初始值（如果请求已完成）
};
</script>

方案2：直接使用useFetch的手动触发能力（更简洁） #

如果使用的是VueUse的useFetch，可以通过immediate: false禁用自动请求，再用execute方法手动触发，此时ssData直接绑定请求的响应式结果：

<template>
  <h1>Senior Options</h1>
  <button @click="getSSValues">Get Data</button>
  <div v-if="ssData">{{ ssData.values[0][2] }}</div>
</template>

<script setup>
import { useFetch } from '@vueuse/core';

// 禁用自动请求，只在调用execute时发起
const { data: ssData, execute } = useFetch(ssURL, { immediate: false });

const getSSValues = () => {
  execute();
};
</script>

内容的提问来源于stack exchange，提问作者Alan