toRef与toRefs

最新推荐文章于 2025-01-26 09:57:34 发布

二七二十七

最新推荐文章于 2025-01-26 09:57:34 发布

阅读量97

点赞数

分类专栏： Vue3 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lhh_gxx/article/details/127602324

版权

Vue3 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了Vue中toRef与toRefs的相关内容。toRef可创建ref对象，让其value指向源ref对象的某个属性以保持响应式，适用于将响应式对象属性单独提供给外部且保持响应式的场景；toRefs功能与toRef一致，但能批量创建多个ref对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toRef与toRefs

toRef

作用：用于创建一个ref对象，让其value值指向源ref对象中的某个属性，用于保持响应式

语法：toRef(源ref对象, '属性名')

import { reactive, toRef } form 'vue'
export default {
	setup () {
    let person = reactive({
      name: '张三',
      sex: '男',
      info: {
        age: 22
      }
    })

    // 让name1指向了person对象中的name属性，响应式仍然存在；当name1的值改变时，person对象中的name也会改变，反之亦然
    const name1 = toRef(person, 'name')

    // 将person对象中的name赋值给name2，不具备响应式
    // 以下代码相当于：const name2 = '张三'
    const name2 = person.name
    
    return {
      person,
      // 交出person对象中的name
      name1
    }
  }
}

应用场景：要将响应式对象中的某个属性单独提供给外部使用并且依然保持响应式时

toRefs

作用：与toRef的功能一致，但是可以批量创建多个ref对象

语法：toRefs(源ref对象)

import { reactive, toRefs } form 'vue'

export default {
	setup () {
    let person = reactive({
      name: '张三',
      sex: '男',
      info: {
        age: 22
      }
    })
    
    return {
      // 使用toRefs将name, sex, info都使用响应式的形式return出去
      ...toRefs(person)
      // 以上代码等同于以下三行代码
      // name: toRef(person, 'name')
      // sex: toRef(person, 'sex')
      // info: toRef(person, 'info')
    }
  }
}