【Vue3】reactive 直接赋值会导致 Vue 无法正确地监听到属性的变化，从而无法触发视图更新

在 Vue 中，响应式数据的监听和视图更新是通过 Vue 的响应式系统实现的。Vue 3 使用了 Proxy 对象来实现响应式，而 Vue 2 使用了 Object.defineProperty 来实现。

当我们使用 reactive 函数创建响应式对象时，Vue 会将对象的每个属性转换为响应式数据，并使用 Proxy 来监听属性的访问和修改。在这个过程中，Vue 会收集依赖，也就是追踪哪些组件依赖于这些响应式数据。当响应式数据发生变化时，Vue 就能够通过之前收集的依赖来知道哪些组件需要进行重新渲染。

然而，如果我们直接给响应式对象的属性赋值，而不是通过 Vue 的响应式系统进行赋值，例如直接通过 obj.key = value 的方式修改属性值，那么 Proxy 对象无法监听到这个修改操作。因为 Vue 只能监听通过它的响应式 API 创建的对象属性的变化，而无法监听直接的对象属性赋值。

因此，当我们直接给响应式对象的属性赋值时，Vue 无法感知这个变化，也就无法触发之前收集的依赖，导致视图无法正确地更新。

为了确保 Vue 能够正确地追踪响应式数据的变化并触发视图更新，我们应该使用 Vue 提供的响应式 API 来修改数据，例如使用 ref 或 toRefs 创建响应式数据，并通过 ref.value 或 toRefs(obj).key 的方式来访问和修改数据。这样 Vue 就能够正确地监听到数据的变化，并触发相应的组件更新，保证视图与数据的同步。