vue3 toRef

作用

创建一个 ref 对象，其value值指向另一个对象（reactive）中的某个属性。

语法

const name = toRef(指向的对象,'读取的属性')

案例

<!-- toRef -->
<template>
<input type="text"  v-model="people.name">
<input type="text"  v-model="people.age">
<input type="text"  v-model="people.sex">
<input type="text"  v-model="money">


</template>
<script lang = 'ts' setup>
import {reactive,toRef,watch} from 'vue'

const people = reactive({
  name:'小丑',
  age: 19,
  sex :'男',
  job: {
    gz:{
      money:20
    }
  }
})

const money = toRef(people.job.gz,'money')
// 监听方便观察变化
watch(()=>people.job.gz.money,(newval,oldval)=>{
    console.log(newval);
    console.log(oldval);
    
})

</script>

toRefs

toRefs 用来批量处理一个reactive对象中的所有属性

语法如下

<!-- toRef -->
<template>
<input type="text"  v-model="name">
<input type="text"  v-model="age">
<input type="text"  v-model="sex">


</template>
<script lang = 'ts' setup>
import {reactive,toRef,toRefs,watch} from 'vue'

const people = reactive({
  name:'小丑',
  age: 24,
  sex :'男',
  job: {
    gz:{
      money:20
    }
  }
})
const {name, age, sex,} = toRefs(people)
// const money = toRef(people.job.gz,'money')

// 监听方便观察变化
watch(people,(newval,oldval)=>{
    console.log(newval);
    console.log(oldval);
})

</script>