一文带你了解Vue3中toRef和toRefs的用法

toRef 顾名思义，不是ref 响应式数据，给它转成ref 响应式数据

通俗易懂的理解：

 <template>
  <h3>姓名：{{ person.name }}</h3>
  <h3>年龄：{{ person.age }}</h3>
  <h3>薪资：{{ person.job.j1.salary }}</h3>
  <button @click="person.name += '!'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

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

<style>
</style>

首先实现功能没问题，接下来考虑到代码优化：

那可能会想到 我在return的时候，麻烦一些，

 return {
      name: person.name,
      age: person.age,
      job: person.job.j1.salary,
    };

但是，这样操作你会发现页面不是响应式的，数据修改页面不发生变化，如下：

接下来看 toRef的用法： 很明显实现了效果

 <template>
  <h3>姓名：{{ name }}</h3>
  <h3>年龄：{{ age }}</h3>
  <h3>薪资：{{ salary }}</h3>
  <button @click="name += '!'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>

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

<style>
</style>

介绍完toRef的用法之后，接下来来看一下toRefs的用法吧

到此这篇关于一文带你了解Vue3中toRef和toRefs的用法的文章就介绍到这了,更多相关Vue3 toRef toRefs用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一文搞懂Vue3中toRef和toRefs函数的使用

    目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用. toRef 函数 通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢? 首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数

  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    作用:创建一个ref对象,其value值指向另外一个对象中的某个属性.这样在模板中就可以直接使用属性名而不用麻烦的再加对象名前缀了. 语法: const name = toRef(person,'name') 应用:要将响应式对象中的某个属性单独提供给外部使用时. 扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs(person) 示例: toRef <template> <span>{{pe

  • Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)

    目录 ref reactive toRef() toRefs() ref 接受一个内部值,返回一个响应式的.可更改的 ref 对象,此对象只有一个指向其内部值的 property .value. 类型 function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T } 详细信息 ref 对象是可更改的,也就是说你可以为 .value 赋予新的值.它也是响应式的,即所有对 .va

  • vue3 中的toRef函数和toRefs函数的基本使用

    目录 这篇我们看下toRef和toRefs的基本使用 Vue3的toRef 这篇我们看下toRef和toRefs的基本使用 我们知道ref可以用于创建一个响应式数据,而toRef也可以创建一个响应式数据,那他们之间有什么区别呢?事实上,如果利用ref函数将某个对象中的属性变成响应式数据,修改响应式数据是不会影响到原始数据. import {ref} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice'

  • Vue3如何理解ref toRef和toRefs的区别

    目录 一.基础 1.ref 2.toRef 3.toRefs 4.最佳的使用方式 二.深入 1.为什么需要ref 2.ref为什么需要.value 3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么? 一.基础 1.ref (1) 生成值类型的响应式数据, 通过 .value修改值 <template>

  • vue3中的ref,toRef,toRefs三个的作用使用小结

    目录 1. ref的使用 2. toRef的使用 3. toRefs的使用 4.总结 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变化. import { ref } from "vue"; let obj = { name: "你好", age: 16 }; let msg = ref(obj.name); co

  • 一文带你了解Vue3中toRef和toRefs的用法

    toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据 通俗易懂的理解: <template> <h3>姓名:{{ person.name }}</h3> <h3>年龄:{{ person.age }}</h3> <h3>薪资:{{ person.job.j1.salary }}</h3> <button @click="person.name += '!'">修改姓名&l

  • 一文带你了解vue3.0响应式

    一文带你了解vue3.0响应式

    目录 使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联 副作用渲染函数的执行过滤 结尾 我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象

  • 一文带你理解 Vue 中的生命周期

    目录 1.beforeCreate & created 2.beforeMount & mounted 3.beforeUpdate & updated 4.beforeDestroy & destroyed 5.activated & deactivated 前言: 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户

  • 一文带你掌握Java8中Lambda表达式 函数式接口及方法构造器数组的引用

    一文带你掌握Java8中Lambda表达式 函数式接口及方法构造器数组的引用

    目录 函数式接口概述 函数式接口示例 1.Runnable接口 2.自定义函数式接口 3.作为参数传递 Lambda 表达式 内置函数式接口 Lambda简述 Lambda语法 方法引用 构造器引用 数组引用 函数式接口概述 只包含一个抽象方法的接口,称为函数式接口. 可以通过 Lambda 表达式来创建该接口的对象. 可以在一个接口上使用 @FunctionalInterface 注解,这样做可以检查它是否是一个函数式接口.同时 javadoc 也会包含一条声明,说明这个接口是一个函数式接口.

  • 一文带你了解Java中的ForkJoin

    一文带你了解Java中的ForkJoin

    目录 什么是ForkJoin? ForkJoinTask 任务 ForkJoinPool 线程池 工作窃取算法 构造方法 提交方法 创建工人(线程) 例:ForkJoinTask实现归并排序 ForkJoin计算流程 前言: ForkJoin是在Java7中新加入的特性,大家可能对其比较陌生,但是Java8中Stream的并行流parallelStream就是依赖于ForkJoin.在ForkJoin体系中最为关键的就是ForkJoinTask和ForkJoinPool,ForkJoin就是利用

  • 一文带你了解Java中的Object类及类中方法

    一文带你了解Java中的Object类及类中方法

    目录 1. Object类介绍 2. 重写toString方法打印对象 3. 对象比较equals方法 4. hashCode方法 1. Object类介绍 Object是Java默认提供的一个类.Java里面除了Object类,所有的类都是存在继承关系的.默认会继承Object父 类.即所有类的对象都可以使用Object的引用进行接收. 范例:使用Object接收所有类的对象 class Person{} class Student{} public class Test { public s

  • 一文带你了解Qt中槽的使用

    目录 一.建立槽和按钮之间的连接 二.槽函数的定义 一.建立槽和按钮之间的连接 connect(信号发送者,发送的信号,信号接收者,信号接收者的槽函数) 1.例子 connect(ui->pushButton,SIGNAL(clicked(bool)),this,SLOT(showinfo())); 解释: 信号反发送者:pushButton(这是一个按钮),发送信号:clicked(点击按钮),信号接收者:this(本类),信号接收者的槽函数:showinfo(点击按钮后响应的函数) 二.槽函

  • 一文带你了解Golang中interface的设计与实现

    目录 前言 接口是什么 iface 和 eface 结构体 _type 是什么 itab 是什么 生成的 itab 是怎么被使用的 itab 关键方法的实现 根据 interfacetype 和 _type 初始化 itab 接口断言过程总览(类型转换的关键) panicdottypeI 与 panicdottypeE iface 和 eface 里面的 data 是怎么来的 convT* 方法 Java 里面的小整数享元模式 总结 在上一篇文章<go interface 基本用法>中,我们了

随机推荐