vue3 toRef函数和toRefs函数

最新推荐文章于 2025-06-26 09:02:26 发布

大海的深处

最新推荐文章于 2025-06-26 09:02:26 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45664217/article/details/120008233

本文探讨了Vue中ref和toRef的使用，重点比较了两者的区别。ref创建的响应式数据是原始数据的拷贝，修改不会影响源数据，而toRef则建立了一个引用关系，修改响应式数据会直接影响原始数据。此外，ref的数据变化会自动触发界面更新，而toRef不会。在实际应用中，toRefs可以用于将对象的所有属性转换为响应式。

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

这篇我们看下toRef和toRefs的基本使用
我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？
事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。

<template>
 <div class="ToRefsDemo">
   <div>name: {{ name }}</div>
   <div>age: {{ age }}</div>
   <hr>
   <Demo1></Demo1>
 </div>
</template>
<script>
import { reactive, toRef } from 'vue'
import Demo1 from './toRefsDemo1'
export default {
  name: 'ToRefsDemo',
  components: {
    Demo1
  },
  setup () {
    let person = reactive({
      name: 'zs',
      age: 20
    })
    let name = toRef(person, 'name')
    let age = toRef(person, 'age')
    return {
      name,
      age
    }
  }
}
</script>

<style scoped>

</style>

小结：
ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

<template>
 <div class="ToRefsDemo">
   <h1>{{ person }}</h1>
   <div>name: {{ name }}</div>
   <div>age: {{ age }}</div>
   <div>sary: {{ job.sary }}</div>
   <button @click="updateName">修改姓名</button>
   <button @click="addAge">添加年龄</button>
   <button @click="addSary">涨工资</button>
 </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'ToRefsDemo',
  setup () {
    let person = reactive({
      name: 'zs',
      age: 20,
      job: {
        sary: 3000
      }
    })
    const updateName = () => {
      person.name += '~~~'
    }
    const addAge = () => {
      person.age += 10
    }
    const addSary = () => {
      let { job } = person
      job.sary += 1000
    }
    return {
      person,
      updateName,
      addAge,
      addSary,
      ...toRefs(person)
    }
  }
}
</script>

<style scoped>

</style>