Vue中toRef和toRefs

1.toRef

官网地址

• 可以将值、refs或getters规范化为refs
• 可以基于响应式对象上的一个属性，创建一个对应的ref。这样创建的ref与其源属性保持同步；改变源属性的值将更新ref的值。

2.toRefs

官网地址

• 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref。每个单独的ref都是使用toRef()创建的。

<template>
    <div>{{ state.name }}</div>
    <div>{{ state.style }}</div>
    <div>{{ nameRef }}</div>
    <div>{{ dataRef.name }}</div>
    <div>{{ dataRef.style }}</div>
    <div>{{ name }}</div>
    <div>{{ style }}</div>
</template>
<script setup>
import { reactive, toRef, toRefs } from 'vue';
const state = reactive({
    name: "state",
    style: "show"
})
const nameRef = toRef(state, 'name')
const dataRef = toRefs(
    state
)
const {name, style} = toRefs(state)

setTimeout(() => {
    state.name = "name"
}, 2000)

setTimeout(() => {
    nameRef.value = "nameRef"
 
}, 3000)

setTimeout(() => {
    dataRef.name.value = "dataRef"
    dataRef.style.value = "hide"
}, 4000)

</script>