前言

目标

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

toRef与toRefs的用法

看一下官方给的解释
[Vue3] 8 toRef与toRefs的用法_插入图片
也是就当定义const name = toRef(person,'name') 改变name = '李四'的值，person中的name值也会同步变化

toRef

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

<h2 id="h0">{{ person }}</h2>
<h2 id="h1">姓名：{{ name }}</h2>
<button @click="name='李四'">name更改</button>
setup(props,context){
        let person = reactive({
            name:'张三',
            age:18
        }) 
        return{
            person,
            name:toRef(person,'name')
        }
    },
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

修改name的值，person.name的值会同步的变
[Vue3] 8 toRef与toRefs的用法_插入图片_02

toRefs

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

<h2 id="h2">{{ person }}</h2>
<h2 id="h3">姓名：{{ name }}</h2>
<h2 id="h4">年龄：{{ 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)
   }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

[Vue3] 8 toRef与toRefs的用法_插入图片_03