【Vue3】to 系列全家桶

toRef只能修改响应式对象的值，非响应式数据会变，但是不更新视图

toRefs解构响应式对象的所有值

toRaw将响应式对象变为普通对象

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

<script setup lang="ts">
import { toRef, reactive, toRaw, toRefs } from 'vue';
const man = reactive({ name: 'xiaohu', age: 23, like: 'jk' })

// const like = toRef(man, 'like')
// let { name, age, like } = toRefs(man)
// const change = () => {
//   man.like = 'jd'
//   man.age = 45
//   console.log(like, age);
// }

const change = () => {
  console.log(man, toRaw(man));
  
}
</script>

<style lang="scss" scoped></style>