toRef，toRefs函数的作用

toRef:将数据转成响应式

toRefs:将多个数据转成响应式

注意：toRefs将多个数据转成响应式，只是确保第一层数据为响应式，如果是不同层的数据，仅第一层数据为响应式

<template>
  <div>
    <p>{{ name }}-{{ obj.name }}</p>
    <p>{{ job }}</p>
    <p>{{ city }}</p>
  </div>
</template>

<script setup>
import  { ref, toRef, toRefs,reactive} from 'vue'
const obj = reactive({
   name: 'zs',
   sex:'男',
   job: {
    jobname: 'h5工程师',
    city: 'shanghai'
   }
})
// 直接解构会丢失响应式
// const { name } = obj
// const name = toRef(obj, 'name') // 返回值是一个ref对象
// const city = toRef(obj.job, 'city')
// console.log(name.value);
const  { name, job} = toRefs(obj)
const { city } = toRefs(obj.job)

</script>

<style lang="scss" scoped>

</style>