在 Vue 3 的 <script setup>
语法中,如果使用 reactive
包裹的对象被重新赋值为一个新的对象,那么这个新对象将不再是响应式的。这是因为 reactive
函数只会在其被调用时使其参数对象成为响应式的,而后续对该变量的重新赋值(特别是赋值为一个新对象)并不会自动使新对象也变成响应式的。
Vue 3 的响应式系统是基于 ES6 的 Proxy 实现的。当使用 reactive
包裹一个对象时,Vue 会创建一个该对象的 Proxy 实例,并返回这个 Proxy 实例。当修改这个 Proxy 实例的属性时,Vue 能够捕获这些修改并触发视图更新。但是,如果将 reactive
返回的 Proxy 实例重新赋值为一个全新的对象,那么这个新对象就没有被 Vue 的响应式系统处理过,因此它不会触发视图更新。