vue3_toRefs使用

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

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

<template>
    <h2>toRefs的使用</h2>
    <!-- <h3>name:{{state.name}}</h3>
    <h3>age:{{state.age}}</h3> -->

    <h3>name:{{name}}</h3>
    <h3>age:{{age}}</h3>

    <h3>name:{{name2}}</h3>
    <h3>age:{{age2}}</h3>
</template>

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

function useFeatureX() {
    const state = reactive({
        name2: 'zzz',
        age2: 99,
    })
    return {
        ...toRefs(state),
    }
}

export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive({
            name: 'zsl',
            age: 47,
        })

        // 响应式的变量
        const { name, age } = toRefs(state)
        const { name2, age2 } = useFeatureX()

        setInterval(() => {
            name.value += '=='
            console.log('==')
        }, 1000)

        return {
            name,
            age,
            name2,
            age2,
            // ...state,// 这样出来的不是响应式的变量
        }
    },
})
</script>