为何Vue无法立即检测到变量值变化？附代码场景

问题根源 #

你定义的data是普通数组，不属于Vue的响应式数据。当你在axios回调里直接赋值data = response.data时，Vue无法感知到这个变量的变化，因此页面不会自动更新。而修改组件代码触发热重载时，此时data已经被赋值，所以能正常渲染。

解决方案 #

要让数据变化能触发视图更新，必须使用Vue提供的响应式API（ref或reactive）来定义数据。

方案1：使用ref（推荐用于基础类型和数组） #

<script setup>
import SearchBar from '@/Components/Admin/SearchBar.vue';
import { onMounted, ref } from 'vue'
import moment from 'moment'
import axios from 'axios' // 确保导入axios，全局注册可省略

// 用ref创建响应式数组
const data = ref([]);
 
onMounted(() => {
    getBreeders();
})

const getBreeders = () => {
    axios.get(route('tagsmodal.breeders')).then(response=>{
        // ref类型的数据需要通过.value修改
        data.value = response.data;
        console.log(data.value);
    })
}
</script>

<template>
{{ 'the length is '+data.length  }}
<div class="table-view" id="entityTableView">
<table class="fullwidth">
    <thead>
       <tr>
            <th scope="col" data-attribute="title" class="orderable">Title</th>
            <th scope="col" data-attribute="postDate" class="ordered asc">Post Date</th>
        </tr>
    </thead>
    <tbody id="Tbody" >
        <tr v-for="(entity,index) in data" :key="entity.id" >
            <td> {{entity.name}} </td>
            <td> {{ moment(String(entity.created_at)).format('YYYY-MM-DD') }} </td>
        </tr>
    </tbody>
</table>
</div>
</template>

方案2：使用reactive（适合复杂对象） #

<script setup>
import SearchBar from '@/Components/Admin/SearchBar.vue';
import { onMounted, reactive } from 'vue'
import moment from 'moment'
import axios from 'axios'

// 用reactive创建响应式状态对象
const state = reactive({
    data: []
});
 
onMounted(() => {
    getBreeders();
})

const getBreeders = () => {
    axios.get(route('tagsmodal.breeders')).then(response=>{
        // 修改reactive对象的属性即可触发更新
        state.data = response.data;
        console.log(state.data);
    })
}
</script>

<template>
{{ 'the length is '+state.data.length  }}
<div class="table-view" id="entityTableView">
<table class="fullwidth">
    <thead>
       <tr>
            <th scope="col" data-attribute="title" class="orderable">Title</th>
            <th scope="col" data-attribute="postDate" class="ordered asc">Post Date</th>
        </tr>
    </thead>
    <tbody id="Tbody" >
        <tr v-for="(entity,index) in state.data" :key="entity.id" >
            <td> {{entity.name}} </td>
            <td> {{ moment(String(entity.created_at)).format('YYYY-MM-DD') }} </td>
        </tr>
    </tbody>
</table>
</div>
</template>

注意事项 #

• 确保项目中已安装并正确引入axios，若已全局注册（如在main.js中挂载到Vue原型）则无需单独导入。
• Vue的响应式系统仅对ref/reactive包装的数据生效，直接修改普通变量无法触发视图更新。

内容的提问来源于stack exchange，提问作者Inno the tech geek