前端面试题:VUE中对响应式对象的属性进行解构赋值到本地变量为什么会失去响应式?

一、问题来源

解构赋值是 ECMAScript 6 (ES6) 引入的一个非常方便的功能,通过它可以让我们以更简洁的方式从数组或对象中提取值,并将它们赋给变量。

但是如果我们使用解构赋值获取响应式对象中的属性后,再去修改这个属性,会失去响应式,例如

javascript 复制代码
import { reactive } from 'vue';
const state = reactive({ count: 0 });
let { count } = state;
count = 1;

在上面的代码中,修改count后视图不会发生变化。

二、问题分析

在vue3中使用了Proxy来创建响应式对象,当我们将一个响应式对象的属性赋值或解构到一个本地变量时,访问或赋值该变量是非响应式的,因为它将不再触发源对象上的 get / set 代理。

简单的说,我们在使用解构赋值后,让我们实现响应式的Proxy,没了。

顺带介绍一下Proxy:Proxy 是 ES6 中引入的一种特殊对象,它可以作为目标对象的代理,用来拦截并控制对目标对象的操作,如访问、修改属性等。

三、解决办法

vue3中提供了这样一个API:

toRefs():将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。

也就是说,toRefs()接收一个响应式对象作为输入,然后返回一个新的对象。这个新对象的结构与输入的响应式对象相同,但其所有属性都被转换成了ref形式,也就是说,每个属性都变成了一个可以通过.value访问的响应式属性。这样我们就可以维持住这些属性的响应式了,因为它们都是新的响应式对象。

javascript 复制代码
import { reactive, toRefs } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  message: 'Hello Vue!'
});

// 使用 toRefs 将响应式对象转换为具有 ref 属性的新对象
const stateRefs = toRefs(state);

// 解构赋值,这里的 count 和 message 是 ref 类型
const { count, message } = stateRefs;

// 修改 ref 的值,这将触发响应式更新
count.value++;
message.value = 'Updated message';

// 这些修改将被 Vue 的响应式系统捕捉,导致视图更新
相关推荐
慧一居士4 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead6 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app