vue3------toRef,toRefs,toRaw

toRef 复制reactive里的单个属性并转成ref 只能修改响应式对象的值 非响应式视图毫无变化
toRefs 复制reactive里的所有属性并转成ref
toRaw 把响应式对象修改为非响应式的

<template>
  <div>
    {{ man }}
  </div>
  <hr>
  <div>
    <button @click="change">修改</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRef, toRefs, toRaw } from 'vue'

// toRef 复制reactive里的单个属性并转成ref  只能修改响应式对象的值  非响应式视图毫无变化
// toRefs 复制reactive里的所有属性并转成ref
// toRaw  把响应式对象修改为非响应式的
const man = reactive({
  name: '小乔',
  age: 23
})
// const age = toRef(man, 'age')
// let { name, age } = toRefs(man)

const change = () => {
  // name.value = '大乔'
  // age.value = 18
  console.log(man, toRaw(man));
  // console.log(age);
}

</script>