vue3.x专题三 ---- 组合式API---toRef，toRefs函数，转换响应式对象中某个属性或全部属性为单独响应式数据，并且值是关联的

今天总结一下vue3.x中将响应式对象的某个属性或者全部属性转换成单独响应式数据，并且值是关联的组合式API函数   toRef 和   toRefs:

1、toRef ：转换响应式对象中某个属性为单独响应式数据，并且值是关联的。案例如下：

<template>
    <h1>
        组合API-toRef函数:toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
        使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。
    </h1>
    <div>
        name:{{ name }}
    </div>
    <div>
        <button @click="updateName">更改名字</button>
    </div>
</template>

<script>
import { reactive, toRef } from 'vue'
    export default {
        name:"App",
        setup(props,{emit}) {
            const obj = reactive({
                name:"张三",
                age:20
            })
            const name = toRef(obj,"name")
            const updateName = ()=>{
                name.value = "lisi"
                console.log("obj:",obj);
            }
            return {
                name,
                updateName
            }
        }
        
    }
</script>

<style scoped>

</style>

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

2、toRefs:转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的,

案例如下：

<template>
    <h1>
        toRefs是函数：转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
    </h1>
    <h2>
        使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。
    </h2>
    <div>
        <div>name:{{ name }}</div>
        <div>age:{{ age }}</div>
        <div>
            <button @click="updateName">更改名字</button>
        </div>
    </div>
</template>

<script>
   import { reactive, toRefs } from 'vue'
   
   export default {
    setup () {
        const obj = reactive({
            name: '张三',
            age: 20
        })
        console.log("obj:",obj);

        const newObj = toRefs(obj)

        console.log("newObj:",newObj);
        const updateName = () => {
            obj.name = "李四"
            console.log("obj:",obj);
            console.log("newObj:",newObj);
        }
        return {
            ...newObj,
            updateName
        }
    }
   }
</script>

<style scoped>

</style>

使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。