Vue3 中使用 reactive 赋值后页面未更新的解决办法

在 Vue3 的开发过程中，不少开发者会遇到使用 reactive 赋值后页面却未更新的情况，这着实让人头疼。下面我们就来深入探讨这个问题以及相应的解决办法。

要理解 reactive 的工作原理。Vue3 的 reactive 是基于 Proxy 代理对象实现响应式的。它能够劫持对象的属性访问、修改等操作，从而通知 Vue 组件进行更新。然而，有些操作看似对 reactive 数据进行了修改，但实际上却没有触发更新机制。

一种常见的情况是直接对 reactive 对象的属性进行替换式赋值。例如：

import { reactive } from 'vue';
const state = reactive({
    data: {
        name: '张三'
    }
});
// 这种方式不会触发更新
state.data = {
    name: '李四'
};

这是因为直接替换整个对象，Proxy 无法检测到这种变化。解决办法是逐个修改对象的属性：

state.data.name = '李四';

另一种情况是在数组中使用 reactive。当直接通过索引修改数组元素时，Vue 同样无法检测到变化。比如：

const list = reactive([1, 2, 3]);
// 不会触发更新
list[0] = 4;

正确的做法是使用 Vue 提供的数组变异方法，如 splice：

list.splice(0, 1, 4);

还有一种场景是在异步操作中对 reactive 数据进行赋值。由于异步操作的特性，可能会导致数据更新时组件已经完成渲染，从而无法触发更新。例如：

async function fetchData() {
    const response = await axios.get('/api/data');
    state.data = response.data;
}

此时，可以使用 nextTick 方法来强制更新。在 Vue3 中，nextTick 已经被合并到了 Vue 的全局 API 中：

import { nextTick } from 'vue';
async function fetchData() {
    const response = await axios.get('/api/data');
    state.data = response.data;
    await nextTick();
}

在 Vue3 中使用 reactive 时，要遵循其响应式原理的规则，避免那些无法被检测到的赋值操作。通过正确的方法修改数据，才能确保页面能够及时、准确地更新，提升开发效率和用户体验。