Vue笔记10-其它Composition API

shallowReactive与shallowRef

shallow：浅的，和deep相反
shallowReactive：只处理对象最外层属性的响应式
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
如果有一个对象数据，结构比较深，但是变化只对外层属性变化：使用shallowReactive
如果有一个对象数据，后序不会修改对象中的属性，而是生成新的对象来替换：使用shallowRef

<template><h4>当前的x.y值是：{{ x.y }}</h4><button @click="x={y:888}">点我替换x</button><button @click="x.y++">点我x.y++</button><hr><h4>{{ person }}</h4><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>薪资：{{ person.job.j1.salary }}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button>
</template><script>
import {shallowReactive, shallowRef} from 'vue'export default {name: 'App',setup() {//数据let person = shallowReactive({// 只考虑第一层数据的响应式，在修改salary的时候，是修改不成功的name: '张三',age: 18,job: {j1: {salary: 20}}})let x = shallowRef({y: 0});console.log('******', x)//返回一个对象（常用）return {x,person}}
}
</script>

readonly与shallowReadonly

readonly：让一个响应式数据变成只读（深只读）
shallowReadonly：让一个响应式数据变成只读（浅只读）

<template><h4>当前求和为：{{ sum }}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>薪资：{{ person.job.j1.salary }}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button>
</template><script>
import {reactive, readonly, ref, shallowReadonly} from 'vue'export default {name: 'App',setup() {//数据let sum = ref(0)let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}})person = readonly(person);// person里的任何东西都改不了person = shallowReadonly(person);// 浅层次的readonly，深层次的可以修改sum = readonly(sum);// sum改不了sum = shallowReadonly(sum);// sum改不了//返回一个对象（常用）return {sum,person}}
}
</script>

toRaw与markRaw

toRaw：将一个reactive生成的响应式对象转为普通对象，用于读取响应式对象对应的普通对象，对这个普通对象的操作，页面都不会更新。
markRaw：标记一个对象，使其永远不会成为响应式对象，当有些值没必要设置成响应式的时候，可以跳过响应式转换提高性能，例如复杂的第三方类库等。

<template><h4>当前求和为：{{ sum }}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>薪资：{{ job.j1.salary }}K</h2><h3 v-show="person.car">座驾信息：{{ person.car }}</h3><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button><button @click="showRawPerson">输出最原始的person</button><button @click="addCar">给人添加一台车</button><button @click="person.car.name+='!'">换车名</button><button @click="changePrice">换价格</button>
</template><script>
import {markRaw, reactive, ref, toRaw, toRefs} from 'vue'export default {name: 'App',setup() {//数据let sum = ref(0)let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}});function showRawPerson() {const p = toRaw(person);p.age++;console.log(p);}function addCar() {let car = {name: '奔驰', price: 40};person.car = markRaw(car);}function changePrice() {person.car.price++;console.log(person.car.price);}//返回一个对象（常用）return {sum,person,...toRefs(person),showRawPerson,addCar,changePrice}}
}
</script>

customRef

自定义ref，可以对ref包装的数据改动，显示的进行跟踪和触发更新。
写一个效果，写一个input和一个h3，在input里输入内容后，h3的内容等待1秒后展示。

<template><input type="text" v-model="keyword"><h3>{{ keyword }}</h3>
</template><script>
import {customRef} from 'vue'export default {name: 'App',setup() {// 自定义一个myReffunction myRef(value, delay) {let timer;// 通过customRef去实现自定义return customRef((track, trigger) => {return {get() {console.log(`通过get方法读取${value}`);track();// 告诉Vue这个value值是需要被“追踪”的return value;},set(newValue) {clearTimeout(timer);timer = setTimeout(() => {value = newValue;console.log(`通过set方法设置${newValue}`);trigger();// 告诉Vue去更新界面}, delay);}}});}let keyword = myRef('hello', 1000);// 使用程序员自定义的refreturn {keyword}}
}
</script>

provide与inject

实现祖先和后代的组件间通信，祖先组件通过provide将数据提供出去，后代组件通过inject注入数据。
App.vue（祖先组件）

<template><div id="App"><h1>我是祖先组件</h1><h2>{{ value }}</h2><button @click="value+=1">点我加1</button><Child></Child></div>
</template>
<script>
import Child from "./components/Child.vue";
import {provide, ref} from "vue";export default {name: 'App',components: {Child},setup() {let value = ref(1);provide('value', value);return {value}}
}
</script>
<style scoped>
#App {background-color: red;padding: 10px;
}
</style>

Child.vue（子组件）

<template><div id="Child"><h1>我是子组件</h1><GrandChild></GrandChild></div>
</template>
<script>
import GrandChild from "./GrandChild.vue";export default {name: "Child",components: {GrandChild}
}
</script>
<style scoped>
#Child {background-color: green;padding: 10px;
}
</style>

GrandChild.vue（孙组件）

<template><div id="GrandChild"><h1>我是孙组件</h1><h1>{{ value }}</h1></div>
</template>
<script>
import {inject} from "vue";export default {name: "GrandChild",setup() {let value = inject("value");return {value}}
}
</script>
<style scoped>
#GrandChild {background-color: yellow;padding: 10px;
}
</style>

响应式数据的判断

isRef：检查一个值是否是一个ref对象
isReactive：检查一个对象是否是由reactive创建的响应式代理
isReadonly：检查一个对象是否是由readonly创建的只读代理
isProxy：检查一个对象是否是由reactive或readonly方法创建的代理

<template><div></div>
</template>
<script>
import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref} from "vue";export default {name: 'App',setup() {let car = reactive({name:"奔驰",price:100});let sum = ref(0);let car2 = readonly(car);console.log(isRef(sum));console.log(isReactive(car));console.log(isReadonly(car2));console.log(isProxy(car));console.log(isProxy(sum));}
}
</script>

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

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

相关文章

利用docker搭建漏洞环境，使用SSRF+Redis写入centos以及ubuntu的公钥，实现免密登录

利用docker搭建漏洞环境，使用SSRF+Redis写入centos以及ubuntu的公钥，实现免密登录

一、实验环境 kali:在kali中搭建docker容器环境&#xff0c;这里我主要是使用第一个&#xff1b; redis作为一种数据库&#xff0c;它可以将数据写入内存中去&#xff0c;我们通过利用ssrf请求&#xff0c;实现服务器对自己的公钥写入&#xff0c;从而实验免密登录&#xff1b;…
阅读更多...
RK3568 GPU介绍及使用

RK3568 GPU介绍及使用

一、RK3568简介 RK3568四核64位Cortex-A55 处理器&#xff0c;采用全新ARM v8.2-A架构&#xff0c;主频最高可达2.0GHz&#xff0c;效能有大幅提升&#xff1b;采用22nm先进工艺&#xff0c;具有低功耗高性能的特点RK3568集成了双核心架构 GPU&#xff0c;高性能VPU以及高效能…
阅读更多...
GraalVM上的多语言混合开发

GraalVM上的多语言混合开发

上篇文件我们介绍了GraalVM强大的静态编译功能，能够让Java应用程序摆脱虚拟机的束缚，像其它本地编译的应用一样直接运行。那么GraalVM的神奇之处仅限于此吗？今天我们再来看看它的另一个重要特性—多语言混合开发 多语言平台 Java并不是唯一运行在JVM上的语言，这个我们都应…
阅读更多...
����: �Ҳ������޷��������� javafx.fxml ԭ��: java.lang.ClassNotFoundException解决方法

����: �Ҳ������޷��������� javafx.fxml ԭ��: java.lang.ClassNotFoundException解决方法

如果你出现了这个问题&#xff0c;恭喜你&#xff0c;你应该会花很多时间去找解决方法。别问我怎么知道的... 解决方法&#xff1a; 出现乱码的原因&#xff1a;配置vm时 这些配置看似由有空格&#xff0c;换行&#xff0c;实则没有。所以解决办法就是&#xff0c;重新配置你…
阅读更多...
防火墙概述

防火墙概述

1、防火墙 防火墙顾名思义就是防止火灾发生时&#xff0c;火势烧到其它区域&#xff0c;使用由防火材料砌的墙。在网络安全中&#xff0c;防火墙的作用就是保护本地网络不受到外部网络或恶意程序的伤害。 防火墙的核心任务是控制和防护&#xff0c;即通过安全策略识别流量并做…
阅读更多...
前端面试题17（js快速检索方法详解）

前端面试题17（js快速检索方法详解）

在前端JavaScript中&#xff0c;快速检索数据通常涉及到数组或对象的搜索。这里我会介绍几种常见的快速检索方法&#xff0c;并提供相应的代码示例。 1. 数组的find和findIndex方法 find: 返回数组中满足条件的第一个元素的值。findIndex: 返回数组中满足条件的第一个元素的索…
阅读更多...
【mindspore进阶】02-ResNet50迁移学习

【mindspore进阶】02-ResNet50迁移学习

Mindspore 应用&#xff08;2&#xff09;ResNet50迁移学习 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化…
阅读更多...
MongoDB：掌握核心常用命令语句，精通数据操作

MongoDB：掌握核心常用命令语句，精通数据操作

标题&#xff1a;MongoDB&#xff1a;掌握核心命令&#xff0c;精通数据操作 前言&#xff1a; MongoDB 是一种非关系型数据库&#xff0c;以文档为中心&#xff0c;使用 JSON 格式的 BSON 来存储数据。它具有高可用性、高性能和易于扩展的特点&#xff0c;被广泛应用于各种规…
阅读更多...
Laravel: 优雅构建PHP应用的现代框架

Laravel: 优雅构建PHP应用的现代框架

在PHP开发生态中&#xff0c;Laravel是一个广受欢迎的现代Web应用框架。以其优雅、简洁的代码风格和强大的功能著称&#xff0c;Laravel使得开发复杂应用变得简单而高效。本文将带你深入了解Laravel框架的核心特性、优势以及如何开始使用这个框架。 Laravel框架简介 Laravel是…
阅读更多...
接口（interface）中定义 `default` 方法

接口（interface）中定义 `default` 方法

在 Java 8 及以后版本中&#xff0c;接口&#xff08;interface&#xff09;中可以定义 default 方法。default 方法允许接口提供一个默认的实现&#xff0c;使得接口不仅仅是方法签名的集合&#xff0c;也可以包含方法的具体实现。这一特性提供了更大的灵活性和向后兼容性。以…
阅读更多...
张量分解(2)——张量运算（内积、外积、直积、范数）

张量分解(2)——张量运算（内积、外积、直积、范数）

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…
阅读更多...
MATLAB贝叶斯线性回归模型案例

MATLAB贝叶斯线性回归模型案例

采用辛烷值数据集“spectra_data.mat”&#xff08;任意数据集均可&#xff09;&#xff0c;介绍贝叶斯线性回归模型的构建和使用流程。 运行结果如下&#xff1a; 训练集预测精度指标如下: 训练集数据的R2为: 1 训练集数据的MAE为: 0.00067884 训练集数据的RMSE为: 0.0008893…
阅读更多...
STM32点灯闪烁

STM32点灯闪烁

stm32c8t6引脚图 开发板引脚图 GPIO端口的每个位可以由软件分别配置成 多种模式。 ─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能 配置GPIO端口步骤&#xff1a;开启时钟->使用结构体设置输出模式…
阅读更多...
水仙花数算法

水仙花数算法

一、水仙花的传说 希腊神话故事 传说希腊神话里&#xff0c;美少年纳西索斯&#xff08;Narcissus&#xff09;是希腊最俊美的男子&#xff0c;无数的少女对他一见倾心&#xff0c;可他却自负地拒绝了所有的人。这当中包括美丽的山中仙女伊可&#xff08;Echo&#xff09;。伊可…
阅读更多...
分享一些提升效率的办公、学习神器！

分享一些提升效率的办公、学习神器！

分享一些提升效率的办公、学习神器&#xff01; 文章目录 分享一些提升效率的办公、学习神器&#xff01; 一、 ✅ 文件搜索工具 Everything&#xff1a;1.1 Everything 主要功能&#xff1a;1.2 Everything 下载地址&#xff1a; 二、 ✅ 文件压缩解压工具 7 - Zip&#xff1a…
阅读更多...
AI免费英语学习在线工具：Pi；gpt；其他大模型AI 英语学习智能体工具

AI免费英语学习在线工具：Pi；gpt；其他大模型AI 英语学习智能体工具

1、pi(强烈推荐&#xff1a;可以安卓下载使用) https://pi.ai/talk &#xff08;网络国内使用方便&#xff09; 支持实时聊天与语音对话 2、chatgpt&#xff08;强烈推荐&#xff1a;可以安卓下载使用) https://chat.openai.com/ &#xff08;网络国内使用不方便&#xf…
阅读更多...
2028年企业云存储支出翻倍，达到1280亿美元

2028年企业云存储支出翻倍，达到1280亿美元

根据Omdia的研究&#xff0c;到2028年&#xff0c;企业云存储支出将从去年的570亿美元翻一番以上&#xff0c;达到1280亿美元。该研究分析了基础设施即服务&#xff08;IaaS&#xff09;和平台即服务&#xff08;PaaS&#xff09;数据中心的收入&#xff0c;作为年度存储数据服…
阅读更多...
C++初学者指南-4.诊断---valgrind

C++初学者指南-4.诊断---valgrind

C初学者指南-4.诊断—Valgrind Valgrind&#xff08;内存错误检测工具&#xff09; 检测常见运行时错误 读/写释放的内存或不正确的堆栈区域使用未初始化的值不正确的内存释放&#xff0c;如双重释放滥用内存分配函数内存泄漏–非故意的内存消耗通常与程序逻辑缺陷有关&#xf…
阅读更多...
Halcon 背景网格产品刮伤缺陷检测

Halcon 背景网格产品刮伤缺陷检测

* 关闭窗口 dev_close_window ()*关闭程序计数器,图形变量更新,窗口图形更新 dev_update_off ()*设置图像路径 Path : lcd/mura_defects_blur_*读取一张图像 read_image (Image, Path 01)*获取图像大小 get_image_size (Image, Width, Height)*创建一个新窗体 dev_open_window…
阅读更多...
Apache Seata应用侧启动过程剖析——注册中心与配置中心模块

Apache Seata应用侧启动过程剖析——注册中心与配置中心模块

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata应用侧启动过程剖析——注册中心与配置中心模块 前言 在Seata的应用侧&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023