VUE3----toRef与toRefs

最新推荐文章于 2024-09-03 14:47:59 发布

十友九

最新推荐文章于 2024-09-03 14:47:59 发布

阅读量236

点赞数

分类专栏： VUE3 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43778556/article/details/124058221

版权

VUE3 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

本文介绍了Vue中如何利用toRef和toRefs来创建响应式的属性引用。通过toRef可以将对象中的某个属性转换为ref，从而在模板中直接响应式更新。同时，toRefs则可以批量将整个对象转换为ref对象，方便外部直接操作。示例代码展示了在模板中如何使用这些ref来动态修改和展示数据。

摘要由CSDN通过智能技术生成

作用:创建一个ref对象,其value值指向另一个对象中的某个属性
语法:const name = toRef(person,‘name’)
应用:要将响应式对象中的某个属性单独提供给外部使用时
扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,语法:toRefs(person)

<template>
  <h4>{{ person }}</h4>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>薪水:{{ job.j1.salary }}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪水</button>
</template>

<script>
import {reactive, toRef, toRefs} from 'vue'

export default {
  name: 'App',
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    const name1 = person.name
    console.log('name1', name1)

    const name2 = toRef(person, 'name')
    console.log('###', name2)
    const name3 = toRefs(person)
    console.log('name3====', name3)
    // 返回一个对象(常用)
    return {
      person,
      ...toRefs(person),
    }
  }
}
</script>