vue3中常见的组合式API

一、toRef 和 toRefs

应用:要将响应式对象中的某个属性单独提供给外部使用时。

语法:

        toRef语法:const name = toRef(person, 'name')

        toRefs语法:toRefs(person),如果在return中直接写,需要用...(展开运算符)

二、shallowRef 与 shallowReactive(shallow浅层次的)

shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。

shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

应用:

        如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换,用shallowRef。

        如果有一个对象数据,结构较深,变化时只有外层属性变化,用shallowReactive。

三、readonly 与 shallowReadonly(shallow浅层次的)

readonly:让一个响应式数据变为深层次只读(所有属性都不能被修改)。

shallowReadonly:让一个响应式数据变为浅只读(只有最外层属性不能被修改)。

应用:当一个对象定义在hook中,或者可复用的组件中,如果其中一个父组件不允许修改这个对象,就可以使用。

用法:person = readonly(person)     person = shallowReadonly(person)

四、toRaw 与 markRow

toRaw:

        作用:将一个由 reactive 生成的响应式对象转为普通对象

        应用:读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。

        语法:const p = toRaw(person)

markRaw:

        作用:标记一个对象属性,使其永远不会再成为响应式。

        应用:
                (1)有些值不应被设置为响应式的,例如复杂的第三方类库等。
                (2)当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

        语法:person.car = markRow(car)

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

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

相关文章

【TGRS 2023】RingMo: A Remote Sensing Foundation ModelWith Masked Image Modeling

RingMo: A Remote Sensing Foundation Model With Masked Image Modeling, TGRS 2023 论文:https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber9844015 代码:https://github.com/comeony/RingMo MindSpore/RingMo-Framework (gitee.com) …

软件测试之【单元测试、系统测试、集成测试】

一、单元测试的概念 单元测试(Unit Testing)是对软件基本组成单元进行的测试,如函数(function或procedure)或一个类的方法(method)。当然这里的基本单元不仅仅指的是一个函数或者方法&#xff…

Python:实现日历功能

背景 日常生活中,每天都要用到日历,日历成为我们生活中的必需品,那么如何制作日历呢,其实方法有很多,可以直接在excel中制作,也可以手画等等。 学习过编程的朋友,能否想到用Python编写一…

【Pytorch】Pytorch学习笔记02 - 单变量时间序列 LSTM

目录 说明简单神经网络LSTM原理Pytorch LSTM生成数据初始化前向传播方法训练模型自动化模型构建 总结参考文献 说明 这篇文章主要介绍如何使用PyTorch的API构建一个单变量时间序列 LSTM。文章首先介绍了LSTM,解释了它们在时间序列数据中的简单性和有效性。然后&…

Elasticsearch常见错误

一 read_only_allow_delete" : "true" 当我们在向某个索引添加一条数据的时候,可能(极少情况)会碰到下面的报错: {"error": { "root_cause": [ { "type": "cluster_block_exception", "r…

智慧垃圾站:AI视频智能识别技术助力智慧环保项目,以“智”替人强监管

一、背景分析 建设“技术先进、架构合理、开放智能、安全可靠”的智慧环保平台,整合环境相关的数据,对接已建业务系统,将环境相关数据进行统一管理,结合GIS技术进行监测、监控信息的展现和挖掘分析,实现业务数据的快速…

每日一练——快速合并2个有序数组

每日一练来喽~~~ 今天up主为大家分享一个,快速合并2个有序数组的法子,注意听哟! 题目: 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数…

[Docker]二.Docker 镜像,仓库,容器介绍以及详解

一.Docker 镜像,容器,仓库的简单介绍 通俗来讲:镜像相当于VM虚拟机中的ios文件,容器相当于虚拟机系统,仓库相当于系统中的进程或者执行文件,容器是通过镜像创建的 1.镜像 Docker 镜像就是一个 Linux 的文件系统( Root FileSystem ),这个文…

万宾科技智能井盖传感器怎么使用?

时代在进步,科技在更新,人们身边的万事万物都在随着时代的脚步不断的前进。各种各样高科技技术在城市基础设施建设的过程中得到应用,很多智能产品不仅施工方便,而且可以向政府部门提供精准的数据,提高了相关管理人员的…

一、PHP环境搭建[phpstorm]

一、安装 1.php编写工具 地址:https://www.jetbrains.com/phpstorm/download/#sectionwindows 图示: 2.php环境 解释:建议使用phpstudy进行安装,安装较为简单 链接:https://www.xp.cn/ 图示: 二、第…

leetcode系列(双语)002——GO两数相加

文章目录 两数相加 | Add Two Numbers示例个人解答官方解答扩展Algorithm 两数相加 | Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a sing…

yyds,Elasticsearch Template自动化管理新索引创建

一、什么是Elasticsearch Template? Elasticsearch Template是一种将预定义模板应用于新索引的功能。在索引创建时,它可以自动为新索引应用已定义的模板。Template功能可用于定义索引的映射、设置和别名等。它是一种自动化管理索引创建的方式&#xff0…

Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (四)

这篇博客是之前文章: Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (一)Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (二&a…

SQL实现数据透视效果

一、透视 在SQL中实现类似Excel中数据透视表的效果&#xff0c;需要使用到PiVOT函数 SELECT <non-pivoted column>,[first pivoted column] AS <column name>,[second pivoted column] AS <column name>,... FROM(<SELECT query that produces the data…

0基础学习PyFlink——不可以用UDTAF装饰器装饰function的原因分析

在研究Flink的“用户自定义方法”&#xff08;UserDefinedFunction&#xff09;时&#xff0c;我们看到存在如下几种类型的装饰器&#xff1a; UDF&#xff1a;User Defined Scalar FunctionUDTF&#xff1a;User Defined Table FunctionUDAF&#xff1a;User Defined Aggrega…

doris 问题 列表

1. flink 导入数据后 出现的错误 2.错误描述&#xff1a; 导入任务过多&#xff0c;新导入任务提交报错 “current running txns on db xxx is xx, larger than limit xx ”&#xff1f; 调整 fe 参数 : max_running_txn_num_per_db&#xff0c;默认100&#xff0c;可适当调…

vue3 elementPlus 表格实现行列拖拽及列检索功能

1、安装vuedraggable npm i -S vuedraggablenext 2、完整代码 <template> <div classcontainer><div class"dragbox"><el-table row-key"id" :data"tableData" :border"true"><el-table-columnv-for"…

ChatGPT和Copilot协助Vue火速搭建博客网站

AI 对于开发人员的核心价值 网上会看到很多 AI 的应用介绍或者教程 使用 AI 聊天&#xff0c;咨询问题 —— 代替搜索引擎使用 AI 写各种的电商文案&#xff08;淘宝、小红书&#xff09;使用 AI 做一个聊天机器人 —— 这最多算猎奇、业余爱好、或者搞个套壳产品来收费 以上…

java8 Lambda表达式以及Stream 流

Lambda表达式 Lambda表达式规则 Lambda表达式可以看作是一段可以传递的代码&#xff0c; Lambda表达式只能用于函数式接口&#xff0c;而函数式接口只有一个抽象方法&#xff0c;所以可以省略方法名&#xff0c;参数类型等 Lambda格式&#xff1a;&#xff08;形参列表&…

nginx加权轮询,upstream,Keepalive,负载均衡实现案例

1. nginx 加权轮询, weight是权重配置。 #配置上游服务器 upstream tomcats {server 192.168.1.173:8080 weight=1;server 192.168.1.174:8080 weight=2;server 192.168.1.175:8080 weight=5; } server{liste