Vue3 - toRefs的使用

问题： 用reactive对象抽取出的所有属性值的都是非响应式的
解决： 用toRefs可以将一个响应式reactive对象的所有属性值转换为响应式的ref属性。

<template>
  <div id="nav">
        <h3>{{id}}</h3>
        <h3>{{name}}</h3>
  </div>
</template>
<script lang="ts">
    import {defineComponent,reactive,toRefs} from "vue"
    export default (defineComponent)({
        setup() {
            let state1 = reactive({
                id: '222',
                name: '张三'
            })
            const {id,name} = toRefs(state1)
            setInterval((()=> {
                id.value += '-';
                name.value += '='
            }),1000)
            return {
                id,
                name
            }
        }
    })
</script>

<style>

</style>