扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >VuetoReftoRefstoRaw函数使用示例
  • 328

0
分享到

VuetoReftoRefstoRaw函数使用示例

VuetoRef函数VuetoRefs函数VuetoRaw函数 2023-03-09 17:03:15 328人浏览 泡泡鱼
摘要

目录1. toRef2. toRefs3. toRaw1. toRef 将一个对象中的属性转换成单独的响应式引用接收两个参数：参数一 => 对象 参数二 => 属性转换后

1. toRef

  • 将一个对象中的属性转换成单独的响应式引用
  • 接收两个参数：参数一 => 对象 参数二 => 属性
  • 转换后的响应式引用会跟踪原始属性的变化
  • 转换后的响应式可以被用于计算属性及监听器中

使用toRef函数

<template>
  <div class="wrapper">
    <button @click="handleClick">修改</button>
    <div>countRef: {{ countRef }}</div>
  </div>
</template>
<script setup lang="ts">
import { Reactive, toRef } from 'Vue';
let obj = {
  name: '张三',
  count: 0
}
let countRef = toRef(obj, 'count')
const handleClick = () => {
  countRef.value++
  console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

原对象为非响应式，改变后，值会改变，但页面不会更新

原对象是响应式，改变后，值改变，页面也会更新

<template>
  <div class="wrapper">
    <button @click="handleClick">修改</button>
    <div>countRef: {{ countRef }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = reactive({
  name: '张三',
  count: 0
})
let countRef = toRef(obj, 'count')
const handleClick = () => {
  countRef.value++
  console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

2. toRefs

  • 将一个对象的所有属性变成响应式引用
  • 接收一个对象
  • 追踪原对象的引用关系
  • 原对象如果是响应式的，那么修改值会更新，视图会刷新
  • 原对象如果非响应式，那么修改值会更新，视图不会更新

使用toRefs函数

<template>
  <div>
    <button @click="handleClick">修改</button>
    <div>num: {{ num }}</div>
    <div>count: {{ count }}</div>
    <div>age: {{ age }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
let obj = reactive({
  num: 0,
  count: 0,
  age: 0
})
let { num, count, age } = toRefs(obj)
const handleClick = () => {
  num.value++
  console.log(num.value, 'num.value');
  count.value++
  console.log(count.value, 'count.value');
  age.value++
  console.log(age.value, 'age.value');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

3. toRaw

  • 将一个响应式对象变成非响应式
  • 修改值会更新，视图不会刷新

使用toRaw函数

<template>
  <div>
    <button @click="handleClick">修改</button>
    <div>num: {{ num }}</div>
    <div>count: {{ count }}</div>
    <div>age: {{ age }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue';
let obj = reactive({
  num: 0,
  count: 0,
  age: 0
})
let { num, count, age } = toRaw(obj)
const handleClick = () => {
  num++
  console.log(num, 'num');
  count++
  console.log(count, 'count');
  age++
  console.log(age, 'age');
}
</script>
<style scoped>
div {
  font-size: 28px;
}
</style>

总结：这篇文章介绍了vue3中将响应式对象的属性转换为响应式引用的toRef函数和用于将多个响应式对象的属性转换为响应式引用的toRefs函数，以及用于获取响应式对象的原始对象的toRaw函数。这些函数可以帮助我们快速创建响应式数据，实现数据的自动更新。需要注意的是，使用toRaw函数获取一个响应式对象的原始对象是不推荐的做法，因为原始对象不具备响应式的特性，对原始对象的修改不会触发相应的依赖更新。

到此这篇关于Vue toRef toRefs toRaw函数使用示例的文章就介绍到这了,更多相关Vue toRef toRefs toRaw内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: VuetoReftoRefstoRaw函数使用示例

本文链接: https://lsjlt.com/news/199116.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • VuetoReftoRefstoRaw函数使用示例
    目录1. toRef2. toRefs3. toRaw1. toRef 将一个对象中的属性转换成单独的响应式引用接收两个参数：参数一 => 对象 参数二 => 属性转换后...
    99+
    2023-03-09
    Vue toRef函数 Vue toRefs函数 Vue toRaw函数
  • MySQL函数的使用示例
    小编给大家分享一下MySQL函数的使用示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！案例：使用各种函数操作数据，掌握各种函数...
    99+
    2024-04-02
  • mysql求和函数使用示例
    复制代码 代码如下: $sql="SELECT SUM(prise) sum from buylist where mid = '1'"; $ress=mysql_...
    99+
    2022-11-15
    mysql 求和函数
  • Kotlin函数使用示例教程
    目录我们先看看简单的函数我们写一个求和函数函数头函数体调用函数非常简单反编译Java源代码步骤接下来我们来看看匿名函数这是接口的声明我们先看看简单的函数 // 前面的文章我们了解到它...
    99+
    2024-04-02
  • javascript经典函数使用示例
    这篇文章主要介绍javascript经典函数使用示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1。字符串替代方法。function String_Replace(srcString,findString,repl...
    99+
    2023-06-03
  • php中sprintf()函数的使用示例
    这篇文章给大家分享的是有关php中sprintf()函数的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。php有什么用php是一个嵌套的缩写名称，是英文超级文本预处理语言，它的语法混合了C、Java、Pe...
    99+
    2023-06-14
  • PHP中explode()函数的使用示例
    这篇文章给大家分享的是有关PHP中explode()函数的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。php有什么用php是一个嵌套的缩写名称，是英文超级文本预处理语言，它的语法混合了C、Java、Pe...
    99+
    2023-06-14
  • Python的函数使用示例详解
    目录1 跳出循环-break2 python函数2.1 内置函数2.2 自定义函数2.3 main函数在两种python循环语句的使用中，不仅仅是循环条件达到才能跳出循环体。所以，在...
    99+
    2024-04-02
  • MySQL日期函数的使用示例
    这篇文章主要为大家展示了“MySQL日期函数的使用示例”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“MySQL日期函数的使用示例”这篇文章吧。日期函数1、CURDATE()/CURRENT_DA...
    99+
    2023-06-03
  • Shell脚本中使用function（函数）示例
    函数可以在shell script当中做一个类似自定义执行命令，最大的功能就是可以简化我们很多的程序代码。需要注意的是shell script的执行方式是由上而下/由左而右，因此在shellscript当中...
    99+
    2022-06-04
    示例 脚本 函数
  • Go语言sort包函数使用示例
    目录sort包简介sort包内置函数sort.Ints(x []int)sort.Slice(x any, less func(i, j int) bool)sort.Sort...
    99+
    2022-06-07
    GO 示例 函数 sort
  • php中array_reverse()函数的使用示例
    这篇文章主要介绍php中array_reverse()函数的使用示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！php有什么特点1、执行速度快。2、具有很好的开放性和可扩展性。3、PHP支持多种主流与非主...
    99+
    2023-06-14
  • PHP8函数：get_debug_type()的多种使用示例
    PHP 8 是 PHP 编程语言的最新的主要版本，它引入了一些新的功能和语言特性，其中包括一个全新的函数 get_debug_type()。get_debug_type() 函数是一个非常有用的函数，可以帮助开发人员在代码中更方便地处理变量...
    99+
    2023-05-18
    get_debug_type() PHP函数 多种使用示例
  • python高阶函数使用教程示例
    目录一、高阶函数函数定义函数名可作为返回值、也可作为参数（1）函数名作为参数（2）函数名作为返回值二、常用的高阶函数（1）map(function,iterable)（2）filte...
    99+
    2024-04-02
  • SparkSQL开窗函数分析使用示例
    目录聚合函数和开窗函数开窗函数聚合开窗函数排序开窗函数开窗函数能在每行的最后一行都显示聚合函数的结果，所以聚合函数可以用作开窗函数 聚合函数和开窗函数 聚合函数是将多行变成一行，如果...
    99+
    2023-01-28
    SparkSQL开窗函数 SparkSQL窗口函数
  • mysql函数用法示例
    这篇文章主要介绍了mysql函数用法示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。检测Mysql的性能可以通过 selec&#...
    99+
    2024-04-02
  • JavaScript高阶API数组reduce函数使用示例
    目录正文1.求数组中所有对象的年龄和2.按照年龄分组3.将数组对象转化为对象4.参数打印总结正文 前面我们讲了数组的一些基本方法，今天给大家讲一下数组的reduce(),它是数组里面...
    99+
    2022-11-13
    JavaScript数组API reduce JavaScript API reduce
  • Python函数介绍：float函数的功能和使用示例
    Python函数介绍：float函数的功能和使用示例Python是一种广泛应用于多个领域的高级编程语言，它提供了丰富的内置函数，以便开发者能够更加方便地开发和处理数据。其中之一就是float函数，它用于将字符串或者数字转换为浮点数类型。在本...
    99+
    2023-11-03
    功能 使用示例 float函数
  • Python函数介绍：len函数的功能和使用示例
    Python函数介绍：len函数的功能和使用示例在Python编程中，len()是一个常用的内置函数，它用来返回传入对象的长度或元素个数。这个函数可以用于字符串、列表、元组、字典和集合等不同类型的数据结构。len()函数非常简单易用，本文将...
    99+
    2023-11-03
    Python 函数 len函数
  • Python函数介绍：locals函数的功能和使用示例
    Python函数介绍：locals函数的功能和使用示例Python是一种广泛应用于各个领域的编程语言，其强大的函数特性帮助程序员有效地组织和管理代码。在Python中，有许多内置的函数可以帮助我们更好地完成编程任务。其中一个非常有用的函数是...
    99+
    2023-11-03
    Python函数 使用示例 locals函数
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作