[Vue3] 8 toRef与toRefs的用法

前言

目标

1 toRef与toRefs的用法 2 toRef与ref的不同

toRef与toRefs的用法

看一下官方给的解释 也是就当定义const name = toRef(person,'name') 改变name = '李四'的值，person中的name值也会同步变化

toRef

只能处理一个对象中的一个属性

<h2>{{ person }}</h2>
<h2>姓名：{{ name }}</h2>
<button @click="name='李四'">name更改</button>
setup(props,context){
        let person = reactive({
            name:'张三',
            age:18
        }) 
        return{
            person,
            name:toRef(person,'name')
        }
    },

修改name的值，person.name的值会同步的变

toRefs

可以处理一个对象中的多个属性

<h2>{{ person }}</h2>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<button @click="name='李四'">name更改</button>
<button @click="age=24">age更改</button>
setup(props,context){
        let person = reactive({
            name:'张三',
            age:18
        })
   return{
       person,
       ...toRefs(person)
   }
}