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>
相关文章:
Vue笔记10-其它Composition API
shallowReactive与shallowRef shallow:浅的,和deep相反 shallowReactive:只处理对象最外层属性的响应式 shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理 如果有一个对象数据,结构比较深&a…...
AI集成工具平台一站式体验,零门槛使用国内外主流大模型
目录 0 写在前面1 AI艺术大师1.1 绘画制图1.2 智能作曲 2 AI科研助理2.1 学术搜索2.2 自动代码 3 AI智能对话3.1 聊天机器人3.2 模型竞技场 4 特别福利 0 写在前面 人工智能大模型浪潮滚滚,正推动着千行百业的数智化进程。随着技术演进,2024年被视为是大…...
北京交通大学学报
《北京交通大学学报》是经新闻出版广电总局批准,由教育部主管,北京交通大学主办的自然科学理论与技术类学术期刊。学报致力于全面反映交通运输和信息与通信领域相关学科的最新研究进展。主要刊登交通运输工程、系统科学、信息与通信工程、控制科学与工程…...
【LinuxC语言】手撕Http之处理POST请求
文章目录 前言声明POST的组成读取POST信息读取消息体长度读取消息体解析消息体How to use?总结前言 在互联网的世界中,HTTP协议无疑是最重要的协议之一。它是Web的基础,支持着我们日常生活中的大部分在线活动。尽管有许多现成的库可以处理HTTP请求,但了解其底层工作原理是…...
以软件定义推动智算中心建设
2024 年 6 月 27 日,由益企研究院和 CDCC 主办、OCTC 开放计算委员会协办、隆高展览承办的"2024 中国智算中心全栈技术大会、第 5 届中国数据中心绿色能源大会暨第 10 届中国(上海)国际数据中心产业展览会”在上海圆满结束。本次大会以&…...
Apache Seata分布式事务原理解析探秘
本文来自 Apache Seata官方文档,欢迎访问官网,查看更多深度文章。 本文来自 Apache Seata官方文档,欢迎访问官网,查看更多深度文章。 前言 fescar发布已有时日,分布式事务一直是业界备受关注的领域,fesca…...
MySQL-18-mysql source 执行 sql 文件时中文乱码
拓展阅读 MySQL 00 View MySQL 01 Ruler mysql 日常开发规范 MySQL 02 truncate table 与 delete 清空表的区别和坑 MySQL 03 Expression 1 of ORDER BY clause is not in SELECT list,references column MySQL 04 EMOJI 表情与 UTF8MB4 的故事 MySQL 05 MySQL入门教程&a…...
flutter环境安装(Mac+vscode)
以前据说flutter跨平台开发app很牛逼,最近突然想到这个东西,于是想体验一下flutter的开发流程,看看能否适合做独立开发。 我用的是mac,手机也是ios,就开始着手部署mac下的开发环境了。 开发后台的时候,一…...
【题解】—— LeetCode一周小结27
🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 【题解】—— 每日一道题目栏 上接:【题解】—— LeetCode一周小结26 2024.7 1.最大化一张图中的路径价值 题目链接:…...
C++后端开发--网络编程基础
目录 一、网络编程基础概念 1.1 网络协议 1.2 IP地址和端口号 1.3 Socket 1.4 TCP协议的三次握手和四次挥手 TCP的三次握手 TCP的四次挥手 整个流程更通俗易懂 TCP 三次握手流程图 TCP 四次挥手流程图 1.5 详细介绍一下http协议 HTTP协议的主要特点 HTTP请求 HTT…...
如何将资源前端通过 Docker 部署到远程服务器
作为一个程序员,在开发过程中,经常会遇到项目部署的问题,在现在本就不稳定的大环境下,前端开发也需要掌握部署技能,来提高自己的生存力,今天就详细说一下如何把一个前端资源放到远程服务器上面通过docker部…...
@react-google-maps/api实现谷歌地图嵌入React项目中,并且做到点击地图任意一处,获得它的经纬度
1.第一步要加入项目package.json中或者直接yarn install它都可以 "react-google-maps/api": "^2.19.3",2.加入项目中 import AMapLoader from amap/amap-jsapi-loader;import React, { PureComponent } from react; import { GoogleMap, LoadScript, Mar…...
【MySQL】2.库的操作
库的操作 一.创建数据库1.数据库的编码集 二.查看数据库三.修改数据库四.删除数据库五.数据库的备份和恢复 一.创建数据库 create database [if not exists] db_name [charsetutf8] [collateutf8_general_ci] //创建一个名为db_name的数据库,本质就是在/var/lib/my…...
深入Laravel服务容器:构建灵活应用的秘诀
标题:深入Laravel服务容器:构建灵活应用的秘诀 Laravel框架的服务容器是一个强大的工具,它负责管理类的依赖关系和执行依赖注入(DI)。服务容器是Laravel依赖注入系统的核心,使得应用组件之间的耦合度降低&…...
3.js - 模板渲染 - 金属切面效果
md,狗不学,我学 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.m…...
【测试】系统压力测试报告模板(Word原件)
系统压力测试,简而言之,是在模拟高负载、高并发的环境下,对系统进行全面测试的过程。它旨在评估系统在面对极端使用条件时的性能表现,包括处理能力、响应时间、资源消耗及稳定性等关键指标。通过压力测试,开发团队能够…...
图片预加载和懒加载
图片预加载 图片预加载是指在页面展示之前提前加载即将使用到的图片资源,以便当用户需要查看时,能够直接从本地缓存中快速渲染,从而提高页面加载速度和用户体验。 原理 图片预加载通过提前将图片下载到浏览器缓存中,当用户实际…...
Java中的数据可视化与图表库选择
Java中的数据可视化与图表库选择 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在现代软件开发中,数据可视化是将抽象数据转化为易于理解的图形化…...
STM32-TIM定时器
本内容基于江协科技STM32视频内容,整理而得。 文章目录 1. TIM1.1 TIM定时器1.2 定时器类型1.3 基本定时器1.4 通用定时器1.4 高级定时器1.5 定时中断基本结构1.6 预分频器时序1.7 计数器时序1.8 计数器无预装时序1.9 计数器有预装时序1.10 RCC时钟树 2. TIM库函数…...
Python OpenCV与霍夫变换:检测符合特定斜率范围的直线
在计算机视觉和图像处理领域,检测图像中的直线是一项常见且重要的任务。OpenCV 提供了许多强大的工具来进行图像处理,其中霍夫变换(Hough Transform)就是用于检测直线的经典方法。本文将介绍如何使用 OpenCV 和霍夫变换来检测图像…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一,能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时,需要添加Git仓库地址和凭证,设置构建触发器(如GitHub…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构
React 实战项目:微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇!在前 29 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
