vue3+ts的toRef和toRefs用法

<template>
  <div>
    <h2>toRefs的使用</h2>
    <h3>姓名:{{ obj.name }}</h3>
    <h3>年龄:{{ obj.age }}</h3>
    <hr />
    <h3>姓名:{{ name }}</h3>
    <h3>年龄:{{ age }}</h3>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRef, toRefs, defineComponent } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    // 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

    // 应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

    // 问题: reactive 对象取出的所有属性值都是非响应式的

    // 解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
    //常规写法
    const obj = reactive({
      name: '夏一跳',
      age: 18
    })
    setInterval(() => {
      obj.name += '=='
    }, 1000);

    //torefs写法
    const obj2 = reactive({
      name: '夏一跳2',
      age: 19
    })
    // const name = toRef(obj2,'name')
    const { name, age } = toRefs(obj2)
    setInterval(() => {
      name.value += '=='
    }, 1000);
    return {
      obj,
      obj2,
      name,
      age
    }
  }
})
</script>