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

Erica_莲子2023-08-06 15:35

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

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