Vue3_对响应式对象解构赋值之后失去响应性

官网toRefs() :响应式 API:工具函数 | Vue.js

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef

javascript 复制代码
setup(){

    const state = reactive({
        name:"张三"
        age:14
    })

    const stateAsToRefs = toRefs(state)
    //stateAsToRefs
    /*
    {
        name:Ref<string>
        age:Ref<number>
    
    }
    
    */
    state.name = "李四"
    console.log(stateAsToRefs.name.value)//李四
    
    stateAsToRefs.name.value = "张三"
    console.log(state.name)//张三
    
    const {name,age} = stateAsToRefs 

    return {name , age }

}
javascript 复制代码
<script setup>

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

</script>

1 当对一个响应式对象进行es6的解构赋值之后,它将失去响应性

可以看到点击修改name的时候,数据变了,但是页面却没有更新。

2 可以使用vue的toRefs()方法,对对象进行解构

即可看到数据修改了以后,页面做出了响应

相关推荐
艾小码2 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀6 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck6 分钟前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
IT技术分享社区9 分钟前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发
林强1814 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐4 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散6 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js