Vue学习笔记14 --自定义hook函数/toRef/provide/inject等

9.自定义hook函数

  • 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。

  • 类似于vue2.x中的mixin。

  • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

10.toRef

  • 作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。

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

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

  • 扩展:toRefstoRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)

11.shallowReactive 与 shallowRef

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

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

  • 什么时候使用?

    • 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。

12.readonly 与 shallowReadonly

  • readonly: 让一个响应式数据变为只读的(深只读)。
  • shallowReadonly:让一个响应式数据变为只读的(浅只读)。
  • 应用场景: 不希望数据被修改时。

13.toRaw 与 markRaw

  • toRaw:
    • 作用:将一个由reactive生成的响应式对象转为普通对象
    • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
  • markRaw:
    • 作用:标记一个对象,使其永远不会再成为响应式对象。
    • 应用场景:
      1. 有些值不应被设置为响应式的,例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

14.customRef

  • 作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。

  • 实现防抖效果:

    <template><input type="text" v-model="keyword"><h3>{{keyword}}</h3>
    </template><script>import {ref,customRef} from 'vue'export default {name:'Demo',setup(){// let keyword = ref('hello') //使用Vue准备好的内置ref//自定义一个myReffunction myRef(value,delay){let timer//通过customRef去实现自定义return customRef((track,trigger)=>{return{get(){track() //告诉Vue这个value值是需要被“追踪”的return value},set(newValue){clearTimeout(timer)timer = setTimeout(()=>{value = newValuetrigger() //告诉Vue去更新界面},delay)}}})}let keyword = myRef('hello',500) //使用程序员自定义的refreturn {keyword}}}
    </script>
    

15.provide 与 inject

  • 作用:实现祖与后代组件间通信

  • 套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据

  • 具体写法:

    1. 祖组件中:

      setup(){......let car = reactive({name:'奔驰',price:'40万'})provide('car',car)......
      }
      
    2. 后代组件中:

      setup(props,context){......const car = inject('car')return {car}......
      }
      

16.响应式数据的判断

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

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

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

相关文章

编程笔记 html5cssjs 069 JavaScrip Undefined数据类型

编程笔记 html5&css&js 069 JavaScrip Undefined数据类型 一、undefined数据类型二、类型运算小结 在JavaScript中&#xff0c;undefined 是一种基本数据类型&#xff0c;它表示一个变量已经声明但未定义&#xff08;即没有赋值&#xff09;或者一个对象属性不存在。 一…

「HDLBits题解」Build a circuit from a simulation waveform

本专栏的目的是分享可以通过HDLBits仿真的Verilog代码 以提供参考 各位可同时参考我的代码和官方题解代码 或许会有所收益 题目链接&#xff1a;Sim/circuit1 - HDLBits module top_module (input a,input b,output q );//assign q a & b ; // Fix meendmodule题目链接&a…

软件压力测试:探究其目的与重要性

随着软件应用在各行各业中的广泛应用&#xff0c;确保软件在高负载和极端条件下的稳定性变得至关重要。软件压力测试是一种验证系统在不同负载条件下的性能和稳定性的方法。本文将介绍软件压力测试的目的以及为什么它对软件开发和部署过程至关重要。 验证系统性能的极限&#x…

防火墙双向NAT配置

目录 拓扑需求 配置配置服务器映射配置NAT策略配置访问外网的NAT 配置安全策略 测试 拓扑 需求 分公司内部的客户端可以通过公网地址访问到内部的服务器 主要配置区域 配置 测试之前记得开启服务器的服务 配置服务器映射 配置NAT策略 源地址和目的地址同时转换 配置访问…

C++文件操作(2)

文件操作&#xff08;2&#xff09; 1.二进制模式读取文本文件2.使用二进制读写其他类型内容3.fstream类4.文件的随机存取文件指针的获取文件指针的移动 1.二进制模式读取文本文件 用二进制方式打开文本存储的文件时&#xff0c;也可以读取其中的内容&#xff0c;因为文本文件…

【Oracle云】OCI DevOps Services 构建自动化流水线 (2) - 创建 Build Pipeline CI 流水线

在软件开发的生命周期中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;是确保团队协作、代码质量和交付效率的关键环节。 OCI DevOps Services 作为 Oracle 云原生 CI/CD 服务&#xff0c;为开发者提供了标准的CI/CD平台&#xff0c;支持构建自动化的…

Vue学习总结

声明&#xff1a;本文来源于黑马程序员PDF讲义 双向绑定&#xff1a; 修改表单项标签&#xff0c;发现vue对象data中的数据也发生了变化 双向绑定的作用&#xff1a;可以获取表单的数据的值&#xff0c;然后提交给服务器 事件绑定 v-on: 用来给html标签绑定事件的。需要注意…

【算法题】86. 分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,4,3,2,5,2], x 3 …

Zookeeper分布式队列实战

目录 Zookeeper分布式队列 普通方式实现 设计思路 具体实现 使用Curator实现 具体实现 注意事项 Zookeeper分布式队列 常见的消息队列有:RabbitMQ&#xff0c;RocketMQ&#xff0c;Kafka等。Zookeeper作为一个分布式的小文件管理系统&#xff0c;同样能实现简单的队列功…

PCB过孔过电流能力计算

PCB&#xff08;印刷电路板&#xff09;过孔的过电流能力计算通常基于以下几个关键参数&#xff1a; 过孔直径&#xff08;D&#xff09;&#xff1a;过孔的直径决定了其有效导电截面积&#xff0c;进而影响载流能力。 铜厚度&#xff08;t&#xff09;&#xff1a;内层或外层…

ImportError: You must install pydot (`pip install pydot`) and install graphviz

1、安装pydot pip install pydot2、安装cudnn 官方下载页面 下载解压后&#xff0c;复制bin、lib、include的三个文件夹到到cuda安装路径中&#xff0c;这是我的cuda路径&#xff1a; C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5直接复制粘贴这三个文件夹&a…

从零学习Linux操作系统 第二十三部分 系统中火墙的管理及优化

1 、实验环境设定 第一台主机需要两个网卡 另一台主机一个网卡桥接到VMnet0上 第一台主机保证能够和windows保持连接 设定第一块儿网卡能够与Windows连接 设定第二台主机能够与第一台主机连接 二、火墙中的基本名词及知识 火墙就相当于是一个表格&#xff0c;这个表格里写…

svn 安装路径

SVN客户端安装&#xff08;超详细&#xff09; 一、SVN客户端安装 1、下载安装包地址&#xff1a;https://tortoisesvn.net/downloads.html 此安装包是英文版的&#xff0c;还可以下载一个语言包&#xff0c;在同界面的下方 一直点击下一步&#xff0c;直到弹出选择红框 然…

QuertWrapper and 和or 用法

1.使用 MyBatis Plus 实现上述 SQL 查询条件可以按照以下步骤进行&#xff1a; 创建一个 QueryWrapper 对象&#xff1a;QueryWrapper<Entity> queryWrapper new QueryWrapper<>();使用 eq 方法添加等于条件和 and 条件&#xff1a;queryWrapper.eq("age&qu…

jsonwebtoken使用HS256生成token失败

项目场景&#xff1a; 用户登入将token返回给用户 问题描述 在koa中使用jsonwebtoken库生成token失败&#xff0c;找了很多原因。 const jwt require("jsonwebtoken"); const { PRIVATE_KEY } require("../config/screct");class LoginController {as…

3. Mybatis的XML配置文件(重点)

目录 1 Mybatis的XML配置文件 1.1 XML配置文件规范 1.2 XML配置文件实现 1.3 MybatisX的使用 2. Mybatis动态SQL 2.1 什么是动态SQL 2.2 动态SQL-if 2.2.1 条件查询 2.2.2更新 2.3 动态SQL-foreach 2.4 动态SQL-sql&include 1.mybatis入门 2.mybatis基本操作 1…

AI智能分析+明厨亮灶智慧管理平台助力“舌尖上的安全”

春节是中国最重要的传统节日之一&#xff0c;在春节期间&#xff0c;人们聚餐需求激增&#xff0c;餐饮业也迎来了高峰期。在这个时期&#xff0c;餐饮企业需要更加注重食品安全和卫生质量&#xff0c;以保证消费者的健康和权益&#xff0c;明厨亮灶智慧管理成为了餐饮业中备受…

记一次复杂左连接的优化之路

慢执行分析 create table t3 as select t_1.lon as lon, t_1.lat as lat, t_1.label as label, t_1.is_core as is_core, t_2.grid_id as grid_id, t_2.mid_jd as mid_jd, t_2.mid_wd as mid_wd, t_2.zs_jd as zs_jd, t_2.zs_wd as zs_wd, t_2.yx_jd as yx_jd, t_2.yx_wd as y…

基于单片机温度控制系统的研究

摘 要&#xff1a;笔者基于单片机的温度控制系统&#xff0c;从单片机选择、传感器选择、系统框架设计等方面概述了单片机的温度控制系统内涵&#xff0c;分析了其运行原理&#xff0c;列举了单片机温度控制系统设计的实操方法&#xff0c;从硬件系统、软件系统、温度检测方法…

windows 11安装跳过联网,使用本地账户登陆

windows 11安装跳过联网&#xff0c;使用本地账户登陆 第一步 断开网络&#xff0c;拔网线 第二步 安装windows11 第三步 shiftF10调出命令行 第四步 输入命令&#xff1a; OOBE\BYPASSNRO回车自动重启&#xff0c;随后继续安装选择我没有网络&#xff0c;即可跳过win…