vue3中reactive数据被重新赋值后无法双向绑定的解决

在Vue3中，数据响应式的实现由Vue2中的Object.defineProperty改为了ES6的Proxy，使得Vue3的响应式系统在性能和功能上都有了提升。但是，在Vue3中，当我们直接给响应式对象中的属性进行重新赋值时，这个属性就会脱离响应式系统，从而失去了双向绑定的功能，即无法自动更新页面。下面给出两个示例，分别说明这个问题的存在及解决方式。

问题示例

我们可以通过一个简单的示例来说明问题。定义一个变量message，并将其变成响应式对象。

import { reactive } from "vue";

const state = reactive({
  message: "Hello Vue3!",
});

在页面中绑定这个变量并展示：

<template>
  <div>{{ state.message }}</div>
</template>

如果我们对这个变量进行重新赋值：

state.message = "Hello World!";

控制台并没有抛出任何错误，但是页面上并没有更新，显示的仍然是原来的"Hello Vue3!"，这意味着重新赋值失去了响应式。

解决方案

Vue 3为我们提供了一些可以解决这个问题的API，我们可以使用Vue3提供的set函数，来更新响应式对象中的属性，这样就可以实现双向绑定了。示例如下所示：

import { reactive, set } from "vue";

const state = reactive({
  message: "Hello Vue3!",
});

set(state, "message", "Hello World!");

我们在修改响应式对象中的属性时，使用Vue3提供的set函数而不是直接赋值，对应的模板就会自动更新数据。

除了set函数，还有一种方法可以解决这个问题，那就是使用toRef函数将响应式对象上的属性转化为一个ref对象，这样当重新赋值后，就会自动更新。示例如下所示：

import { reactive, toRef } from "vue";

const state = reactive({
  message: "Hello Vue3!",
});

const messageRef = toRef(state, "message");

messageRef.value = "Hello World!";

以上两种方法都可以解决这个问题，但是建议使用set函数，因为它更简单明了，并且它是使用Vue3专门为我们提供的替代方案。