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()方法,对对象进行解构

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

相关推荐
AI视觉网奇2 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1232 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡5 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh5 小时前
less和sass
前端·less·sass
Nan_Shu_6146 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel7 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登7 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞7 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始8 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible8 小时前
带有渐变光晕
前端·javascript·css