Vue3中的toRef和toRefs

最新推荐文章于 2024-10-06 12:31:56 发布

richest_qi

最新推荐文章于 2024-10-06 12:31:56 发布

阅读量2.7k

点赞数 5

分类专栏： Vue3 文章标签： toRef toRefs 响应式

本文链接：https://blog.csdn.net/qzw752890913/article/details/123585334

版权

Vue3 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

本文通过一个基础的Vue应用实例，展示了如何使用reactive创建响应式对象。然后讨论了错误地直接引用对象属性导致响应式失效的问题，并介绍了如何利用toRef和toRefs修复这一问题，确保数据的响应性。toRef将深层对象属性转换为响应式，而toRefs则可以批量转换对象的所有属性。文章最后总结了这两种方法在优化代码和维护响应性中的作用。

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

文章目录

基础实例

先看例子吧。

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

Demo.vue

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪酬：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>&nbsp;
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {reactive} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    return {
      person
    }
  }
}
</script>

启动应用，测试效果

错误修改

好，现在我们来仔细看下Demo.vue，template标签里{{person.name}}、{{person.age}}、{{person.job.salary}}、person.name+='~'、person.age++、person.job.salary++，person person的，哪儿哪儿都是person。能不能不重复写person，就像下图右侧那样。
在这里插入图片描述

先尝试下吧，比如这样修改Demo.vue，如下。

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>&nbsp;
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    return {
      name:person.name,
      age:person.age,
      salary:person.job.salary
    }
  }
}
</script>

来测试下效果：name、age和salary失去了响应式。
在这里插入图片描述

正确修改：使用toRef

这时，toRef的给力就凸显出来了。瞧哈！

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>&nbsp;
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      salary:toRef(person.job,"salary")
    }
  }
}
</script>

在这里插入图片描述
toRef的功能类似ref，让数据保持响应式。

正确修改：使用toRefs

toRef，将一个数据变成响应式数据。
toRefs，将多个数据变成响应式数据。

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{job.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>&nbsp;
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="job.salary++">涨薪</button>
</template>

<script>
import {reactive,toRefs} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })
    console.log("toRef(person)=",toRefs(person));
    return {
      ...toRefs(person)
    }
  }
}
</script>