vue3.0(六) toRef,toValue,toRefs和toRow,markRaw

文章目录

  • toRef
  • toValue
  • toRefs
  • toRow
  • markRaw
  • toRef和toRefs的区别
  • toRaw 和markRaw的用处


toRef

  • toRef 函数可以将一个响应式对象的属性转换为一个独立的 ref 对象。
  • 返回的是一个指向源对象属性的 ref 引用,任何对该引用的修改都会同步到源对象属性上。
  • 使用 toRef 时需要传入源对象和属性名作为参数。
  • 转换后的响应式可以被用于计算属性及监听器中
  1. 原对象是响应式,改变后,值改变,页面也会更新
    <template><div>{{ state.bar }}</div><div>{{ barState }}</div><button @click="mutateDeeply">修改数据</button>
    </template>
    <script lang="ts">
    import { defineComponent, reactive, toRef } from 'vue'
    export default defineComponent({setup () {const state = reactive({bar: 2})const barState = toRef(state, 'bar')function mutateDeeply () {barState.value++console.log(barState.value, state.bar)}return {mutateDeeply,state,barState}}
    })
    </script>
    

上述代码执行效果

  1. 原对象为非响应式,改变后,值会改变,但页面不会更新
    <template><div>{{ state.bar }}</div><div>{{ barState }}</div><button @click="mutateDeeply">修改数据</button>
    </template>
    <script lang="ts">
    import { defineComponent, reactive, toRef } from 'vue'
    export default defineComponent({setup () {const state = {bar: 2}const barState = toRef(state, 'bar')function mutateDeeply () {barState.value++console.log(barState.value, state.bar)}return {mutateDeeply,state,barState}}
    })
    </script>
    

上述代码执行效果

  1. 接收一个 Reactive 数组,此时第二个参数应该传入数组的下标:
  // 这一次声明的是数组const words = reactive([1, 2, 3])// 通过下标 `0` 转换第一个 itemconst a = toRef(words, 0)console.log(a.value) // 1console.log(words[0]) // 1// 通过下标 `2` 转换第三个 itemconst c = toRef(words, 2)console.log(c.value) // 3console.log(words[2]) // 3
  1. 设置默认值
  • 如果 Reactive 对象上有一个属性本身没有初始值,也可以传递第三个参数进行设置(默认值仅对 Ref 变量有效):
  • 数组也是同理,对于可能不存在的下标,可以传入默认值避免项目的逻辑代码出现问题:
    interface Member {id: numbername: string// 类型上新增一个属性,因为是可选的,因此默认值会是 `undefined`age?: number
    }// 声明变量时省略 `age` 属性
    const userInfo: Member = reactive({id: 1,name: 'Petter',
    })// 此时为了避免程序运行错误,可以指定一个初始值
    // 但初始值仅对 Ref 变量有效,不会影响 Reactive 字段的值
    const age = toRef(userInfo, 'age', 18)
    console.log(age.value)  // 18
    console.log(userInfo.age) // undefined// 除非重新赋值,才会使两者同时更新
    age.value = 25
    console.log(age.value)  // 25
    console.log(userInfo.age) // 25const numbers = reactive([1, 2, 3])// 当下标对应的值不存在时,也是返回 `undefined`
    const d = toRef(words, 3)
    console.log(d.value) // undefined
    console.log(words[3]) // undefined// 设置了默认值之后,就会对 Ref 变量使用默认值, Reactive 数组此时不影响
    const e = toRef(words, 4, 'e')
    console.log(e.value) // e
    console.log(words[4]) // undefined
    

toValue

  • toValue() 是一个在 3.3 版本中新增的 API。它的设计目的是将 ref 或 getter 规范化为值。如果参数是 ref,它会返回 ref 的值;如果参数是函数,它会调用函数并返回其返回值
  • 与 unref() 类似,不同的是此函数也会规范化 getter 函数。如果参数是一个 getter,它将会被调用并且返回它的返回值。
  1. 应用
    console.log(toValue(1), toValue(ref(1)), toValue(() => 1)) // 1 1 1
    
  2. 在组合式函数中规范化参数:
<template><button @click="mutateDeeply">修改数据</button>
</template>
<script lang="ts">
import { defineComponent, toValue, ref, watch } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
export default defineComponent({setup () {const num = ref(2) function mutateDeeply () {num.value++useFeature(num)}function useFeature (id: MaybeRefOrGetter<number>) {// 监听数据变化watch(() => toValue(id), newId => {// 处理 id 变更console.log(newId)})}// 这个组合式函数支持以下的任意形式:useFeature(1)useFeature(ref(1))useFeature(() => 1)return {mutateDeeply,num}}
})
</script>

toRefs

  • toRefs 函数可以将一个响应式对象转换为一个普通的对象,该对象的每个属性都是独立的 ref 对象。
  • 返回的对象可以进行解构,每个属性都可以像普通的 ref 对象一样访问和修改,而且会保持响应式的关联。
  • toRefs 的使用场景主要是在将响应式对象作为属性传递给子组件时,确保子组件可以正确地访问和更新这些属性。
  1. 与 toRef 不同, toRefs 只接收了一个参数,是一个 reactive 变量。
    <script lang="ts">
    import { defineComponent, toRefs, reactive } from 'vue'export default defineComponent({setup () {interface user {id: numbername: string}// 声明一个 Reactive 变量const userInfo: user = reactive({id: 1,name: 'Petter'})// 传给 `toRefs` 作为入参const userInfoRefs = toRefs(userInfo)console.log(userInfoRefs)console.log(userInfoRefs.id.value)console.log(userInfoRefs.name.value)return {}}
    })
    </script>
    

上述代码打印结果
可以参考vue3.0(五) reactive全家桶

toRow

Vue 创建的代理返回其原始对象。

toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
是一个可以用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法
不建议保存对原始对象的持久引用,请谨慎使用。

import { reactive, toRaw } from 'vue'
const state = reactive({count: 0
})
// 获取原始对象
const rawState = toRaw(state)
// 验证原始对象与包装后的对象是否相等
console.log(rawState === state) // false
// 改变原始对象的值
rawState.count += 1
// 验证包装后的对象是否也受到了改变

markRaw

将一个对象标记为不可被转为代理。返回该对象本身。
markRaw 方法可以将一个对象标记为“非响应式”,从而使其不会被 reactive 包裹,也就不会成为 Vue3 中的响应式对象。

import { reactive, markRaw } from 'vue'const state = reactive({count: 0,obj: {name: '张三'}
})// 标记 obj 对象为“非响应式”
markRaw(state.obj)
// obj 对象不再被 reactive 包裹
console.log(state.hasOwnProperty('__v_raw')) // false// 赋新值时不会触发响应更新
state.obj.name = '李四'
console.log(state.obj.name) // 李四

需要注意的是,一旦一个对象被标记为“非响应式”,它就无法再被 reactive 进行包裹成为响应式对象。
在使用 markRaw 方法时,需要确保这个对象在后续的代码中不需要作为响应式对象来使用或者监听其变化

toRef和toRefs的区别

  1. toRef 修改的是对象的某个属性,生成一个单独的 ref 对象。
  2. toRefs 修改的是整个对象,生成多个独立的 ref 对象集合。
  3. toRefs 适用于在组件传递属性或解构时使用,更加方便灵活,而 toRef 更适合提取单个属性进行操作。
  4. toRef 和 toRefs 都用于将响应式对象的属性转换为 ref 对象。
  5. 转换后的属性仍然保持响应式,对属性的修改会反映到源对象上。
  6. 不管是使用 toRef 还是 toRefs 将响应式对象转成普通对象,在 script 中修改和访问其值都需要通过 .value 进行。

toRaw 和markRaw的用处

  1. toRaw 可以还原数据并避免意外的响应式行为,
  2. markRaw 可以更加精细地控制哪些对象使用响应式并避免出现问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/10704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#中的继承、接口和多态性

继承&#xff08;Inheritance&#xff09; 在C#中&#xff0c;继承允许我们创建一个新的类&#xff08;称为子类或派生类&#xff09;&#xff0c;该类从另一个已存在的类&#xff08;称为父类或基类&#xff09;中继承方法和属性。子类可以添加新的方法和属性&#xff0c;或者…

2024年最新趋势跨境电商平台开发需了解的新技术

随着数字化技术的不断演进和全球市场的日益融合&#xff0c;跨境电商平台开发将面临前所未有的挑战和机遇。为了更好地适应并引领这一发展&#xff0c;开发者需要密切关注2024年最新的技术趋势&#xff0c;以确保他们的平台能够在竞争激烈的市场中脱颖而出。本文将对跨境电商平…

HTML/CSS2

1.前置说明 HTML/CSS1 2.img元素 格式&#xff1a; <img src"图片地址" alt"占位文字" width"图片宽度" height"图片高度">其中alt是当图片加载失败时显示的文字 而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同…

网安面经之文件上传漏洞

一、文件上传漏洞 1、文件上传漏洞的原理&#xff1f;危害&#xff1f;修复&#xff1f; 原理&#xff1a;⽂件上传漏洞是发⽣在有上传功能的应⽤中&#xff0c;如果应⽤程序对⽤户上传的⽂件没有控制或者存在缺陷&#xff0c;攻击者可以利⽤应⽤上传功能存在的缺陷&#xff…

从文本日志到图形日志 图形化编程桌面产品的突破

在一个宽敞明亮的会议室里&#xff0c;阳光透过落地窗洒在会议桌上。卧龙和凤雏相对而坐&#xff0c;他们的面前摆放着一些关于图形化编程桌面产品的资料和测试报告。会议室里的气氛紧张而热烈&#xff0c;团队成员们围坐在一起&#xff0c;专注地倾听着卧龙和凤雏的讨论。 卧龙…

单位学校FM调频电台直放站系统

随着教育技术的不断发展&#xff0c;校园广播系统的建设已成为现代学校必不可少的一部分。作为传统有线广播的有效补充&#xff0c;基于无线电信号传输的 FM 调频电台在学校的使用日益广泛&#xff0c;尤其是在紧急通知、日常信息传播及教学辅助等方面发挥着重要作用。为了增强…

韩顺平0基础学Java——第9天

p169-201 数组&#xff08;第六章&#xff09; 数组扩容 此时原来的数组arr被销毁。 牛蛙&#xff1a; 最后再加一句 SYstem。out。println&#xff08;“是否添加&#xff1f;”&#xff09;&#xff1b; char key myscanner。netx&#xff08;&#xff09;。charAT&…

【Python超详细的学习笔记】Python超详细的学习笔记,涉及多个领域,是个很不错的笔记

获取笔记链接 Python超详细的学习笔记 一&#xff0c;逆向加密模块 1&#xff0c;Python中运行JS代码 1.1 解决中文乱码或者报错问题 import subprocess from functools import partial subprocess.Popen partial(subprocess.Popen, encodingutf-8) import execjs1.2 常用…

Agent AI智能体:未来社会的角色、发展路径与挑战

目录 引言 一、Agent AI智能体的发展路径 1. 技术进步与智能化水平提升 2. 应用场景拓展与普及 二、Agent AI智能体在未来社会中的角色 1. 提高生产效率与生活品质 2. 促进社会进步与发展 三、Agent AI智能体可能带来的挑战 1. 隐私与安全问题 2. 就业与社会结构变革 …

04_led_water_flow_v0 流水灯

04_led_water_flow_v0 流水灯和跑马灯都是一种常见的LED灯效&#xff0c;它们在灯光的变化方式上有所不同。 流水灯是一种灯效模式&#xff0c;LED灯在一定的时间间隔内依次点亮或熄灭&#xff0c;形成像水流一样的效果。而跑马灯则是LED灯在一定的时间间隔内依次从左向右或从…

6-8 十进制转换二进制(递归)

分数 10 作者 C课程组 单位 浙江大学 本题要求实现一个函数&#xff0c;将非负整数n转换为二进制后输出。 函数接口定义&#xff1a; void dectobin( int n );函数dectobin应在一行中打印出二进制的n。建议用递归实现。 裁判测试程序样例&#xff1a; #include <stdio…

WordPress插件Plus WebP,可将jpg、png、bmp、gif图片转为WebP

现在很多浏览器和CDN都支持WebP格式的图片了&#xff0c;不过我们以前的WordPress网站使用的图片都是jpg、png、bmp、gif&#xff0c;那么应该如何将它们转换为WebP格式的图片呢&#xff1f;推荐安装这款Plus WebP插件&#xff0c;可以将上传到媒体库的图片转为WebP格式图片&am…

HIVE调优MapJoin

HIVE调优MapJoin 目录 HIVE调优MapJoin 1.mapjoin &#xff08;1.2以后自动默认启动mapjoin&#xff09; 2.创建表格 3.查询建表 4.通过 explain 展示执行计划 5.Map JOIN 相关设置&#xff1a; 1.mapjoin &#xff08;1.2以后自动默认启动mapjoin&#xff09;…

[机器学习-05] Scikit-Learn机器学习工具包进阶指南:协方差估计和交叉分解功能实战【2024最新】

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

VUE格式探究记录

1.背景 vue格式为鹰图Intergraph SP3D格式&#xff0c;是私有格式。博主对vue格式的直接解析可行性进行了初步的探究&#xff0c;记录如下。 2.探究 目前能够解析vue格式的软件有3类&#xff08;其背后路线有可能有相同的&#xff09;&#xff0c; 鹰图Intergraph系列软件&…

springmvc处理模型数据

springmvc处理模型数据 很多情况下页面上需要很多数据&#xff0c;单单返回页面是不行的&#xff0c;那么springmvc如何将数据返回到该页面呢 springmvc提供了四种方式来输出模型数据 ModelAndView: 处理返回值为ModelAndView时&#xff0c;可以将该对象中添加数据模型 Map及Mo…

数据库监控监听

嘿嘿 又知道多一点点 说来有些惭愧 现在才发现&#xff0c;都怪canal 哈哈 实时监控mysql表除了canal还有什么&#xff0c;还有很多&#xff0c;比如 mysql-binlog-connector-java GitHub - liufeiit/mysql-binlog-connector-java: mysql-binlog-connector-java java库&…

前端小白一文掌握 CSS3 2D转换transform

文章导读&#xff1a;AI 辅助学习前端&#xff0c;包含入门、进阶、高级部分前端系列内容&#xff0c;当前是 CSS 的部分&#xff0c;瑶琴会持续更新&#xff0c;适合零基础的朋友&#xff0c;已有前端工作经验的可以不看&#xff0c;也可以当作基础知识回顾。 CSS3 中的转化 …

设计模式-结构型-桥接模式-Bridge

桥接模式可以减少类的创建 矩阵类 public class Matrix {private String fileName;public Matrix(String fileName) {this.fileName fileName;}public String getFileName() {return fileName;} } 图片抽象类 public abstract class Image {protected ImageImp imp;public …

黄芪党参茶

黄芪党参茶是一种传统的中药茶饮&#xff0c;由黄芪和党参两味药材煮制而成。这种茶饮在中医理论中被认为具有补中益气、调理脾胃、利水消肿、养血安神等多种功效。 主要功效 补中益气&#xff1a;黄芪和党参都具有补中益气的功效。黄芪味甘、性微温&#xff0c;有补气固表的…