vue3基础之toRefs方法

toRefs方法使用

• 初级用法 : 在项目中常常会使用解构语法,对需要的数据进行解构,但是在vue3中直接解构的数据是不具有响应式的,所以Vue3提供了toRefs方法专门用来解构出响应式的数据
• 高级用法 : 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的

<template>
  <div></div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent( {
  name: "ToRefsPra"
})
</script>
<script lang="ts" setup>
import {toRefs,ref,reactive} from "vue";
interface personType {
  name:string,
  age:number
}
let person = ref<personType>({name:'小姜',age:18})
//直接解构数据,并不是ref对象,不具备响应式
let {name,age} = person.value;
console.log('直接结构数据: ' + name,age)
</script>

<template>
  <div></div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent( {
  name: "ToRefsPra"
})
</script>
<script lang="ts" setup>
import {toRefs,ref,reactive} from "vue";
interface personType {
  name:string,
  age:number
}
let person = ref<personType>({name:'小姜',age:18})
//直接解构数据,并不是ref对象,不具备响应式
// let {name,age} = person.value;
// console.log('直接结构数据: ' + name,age)
let {name,age} = toRefs<personType>(person.value)
console.log('使用toRefs解构数据: ' + name,age)
</script>

<style scoped>

</style>

<template>
  <div></div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent( {
  name: "ToRefsPra"
})
</script>
<script lang="ts" setup>
import {toRefs,ref,reactive} from "vue";

const studentClass = reactive({
  class: 1,
  group: 2
})

const stateAsRefs = toRefs(studentClass)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
studentClass.class++  //改变源数据
console.log(stateAsRefs.class.value) // 2    新数据也变化

stateAsRefs.class.value++   //改变新数据
console.log(studentClass.class) // 3   源数据也变化
</script>

<style scoped>

</style>