您的当前位置:首页正文

vue3<script setup>中使用reactive包裹的对象被重新赋值失去响应式原因和解决方式

2024-11-26 来源:个人技术集锦

在 Vue 3 的 <script setup> 语法中,如果使用 reactive 包裹的对象被重新赋值为一个新的对象,那么这个新对象将不再是响应式的。这是因为 reactive 函数只会在其被调用时使其参数对象成为响应式的,而后续对该变量的重新赋值(特别是赋值为一个新对象)并不会自动使新对象也变成响应式的。

原因

Vue 3 的响应式系统是基于 ES6 的 Proxy 实现的。当使用 reactive 包裹一个对象时,Vue 会创建一个该对象的 Proxy 实例,并返回这个 Proxy 实例。当修改这个 Proxy 实例的属性时,Vue 能够捕获这些修改并触发视图更新。但是,如果将 reactive 返回的 Proxy 实例重新赋值为一个全新的对象,那么这个新对象就没有被 Vue 的响应式系统处理过,因此它不会触发视图更新。

解决方式

显示全文