Vue3 —— to 全家桶及源码学习

article/2025/5/3 2:44:32
  • 该文章是在学习 小满vue3 课程的随堂记录
  • 示例均采用 <script setup>,且包含 typescript 的基础用法

前言

本篇主要学习几个 api 及相关源码:

  • toRef
  • toRefs
  • toRaw

一、toRef

  • toRef(reactiveObj, key)
    • 接收两个参数,第一个是 响应式对象,第二个是 指定的key
    • 作用:将 响应式对象一部分也变为响应式,通过 .value 修改
  • toRef 对 非响应式 对象无能为力,修改后 视图不会更新
  • 直接解构 reactiveObj,不使用 toRef,会使解构出的值 丧失响应式
  • 应用场景:某个单独的 属性key 需要被单独使用,并 希望它是响应式的

① 对非响应式对象无能为力

<div class="">hobby:{{ hobby }}</div>
<button @click="change">修改</button>
//  普通对象
const man = {name: "xiaoman",age: 18,hobby: "ball",
};
const hobby = toRef(man, "hobby"); // 对普通对象使用,修改后仅修改值 但不更新视图const change = () => {hobby.value = "sing";console.log("hobby", hobby); // Ref<"sing">,但视图不更新
};

打印更新:
在这里插入图片描述

视图不更新:

在这里插入图片描述

② 将响应式对象的一部分也变为响应式

<div class="">hobby2:{{ hobby2 }}</div>
<button @click="change">修改</button>
// reactive 响应式对象
const man2 = reactive({name: "xiaoman",age: 18,hobby: "ball",
});
const hobby2 = toRef(man2, "hobby");const change = () => {hobby2.value = "dance";console.log("hobby2", hobby2, man2) // hobby2 和 man2 都会更新,视图也会更新
};

打印:

在这里插入图片描述

视图更新:

在这里插入图片描述

③ 直接解构响应式对象

直接解构 响应式对象,不使用 toRef,会使解构出的值 丧失响应式

// reactive 响应式对象
const man2 = reactive({name: "xiaoman",age: 18,hobby: "ball",
});
const { age } = man2; // 直接解构会丧失响应式
console.log("直接解构 age------", age);

解构出的就只是一个普通的值:

在这里插入图片描述

二、toRefs

  • toRefs(reactiveObj)
    • 和 toRef 作用一样,只是不再指定某个key,而是把全部属性都变为响应式
    • 也是需要 传入响应式对象,之后若对其解构,解构出的也是响应式对象
  • 外层不再是响应式,内部的每一个key才是响应式

① 简单实现 toRefs 的源码

其实就是定义一个循环,循环体中 调用 toRef

const toRefsCopy = <T extends object>(obj: T) => {const map: any = {};for (let key in obj) {map[key] = toRef(obj[key]);}return map;
};

② toRefs 使用

<div>refs:{{ refs }}</div>
<div>refs2:{{ refs2 }}</div>
<button @click="change2">修改</button>
const blue = reactive({name: "blue",age: 19,
});const refs = toRefsCopy(blue);
const refs2 = toRefs(blue);
console.log("refs---", refs, refs2);const change2 = () => {// 解构出的每一个key都是响应式const { age } = refs2;age.value = 24;console.log("toRefs", refs, age);
};

toRefs 和 toRefsCopy 处理过后,每个key都是响应式:

在这里插入图片描述
直接解构出的 key 也是响应式,会立刻更新:

在这里插入图片描述

三、toRaw

  • toRaw(reactiveObj)
    • 同样接收一个 响应式对象
    • 作用:toRaw 使 响应式对象 变为 普通原始对象
  • 取出 响应式对象__v_raw 对应的值,跟 toRaw 之后的结果相同(__v_raw 是源码内部的操作)
const people = reactive({name: "bill",age: 12,
});// 打印结果:people 是具有响应式的对象,toRaw 后就变成了普通原始对象
console.log("toRaw-------", people, toRaw(people));// 取出 __v_raw 对应的值,跟 toRaw 的结果相同
console.log("__v_raw-------", people["__v_raw"]);

在这里插入图片描述

四、源码学习

源码贴图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

源码理解记录:

/***(reactivity.cjs.prod.js)搜索 function toRef 即可找到** 1、function toRef (source, key, defaultValue)*    - 先判断 isRef,true的话直接返回*    - 再判断是不是函数类型,GetterRefImpl 内部仍然是直接返回,但会增加一些必要的标记(__v_isRef、__v_isReadonly)**    - 再判断是不是object,是的话走进 propertyToRef*        - 看 source[key] 是否满足 isRef,*            true的话直接返回(已经设置过响应式了)*            否则走进 ObjectRefImpl,这就是 toRef 的核心方法*        - ObjectRefImpl 与 RefImpl(ref) 内部同样有 get、set方法,*          但是区别在于 ObjectRefImpl 没有收集依赖(track)、触发更新(trigger) 的操作*          所以 toRef 对普通对象来讲没有响应式,只对已经有响应式的对象有用**    - 上述类型都不属于的话,直接 ref(source)**** 2、function toRefs (object)**    - 和上面自己写的 toRefsCopy 思路基本一致*        - 先初始化一下,[]或者{}*        - 然后循环,*                判断每个值 若 isRef=true 直接返回*                否则都 走进 ObjectRefImpl 中变为 ref 类型*** 3、function toRaw(observed)**    - 判断 observed 是否存在 __v_raw ,存在的话继续递归 toRaw,否则直接返回 observed*    - 取出的结果就是 不带 __v_raw 的原始普通对象***/

http://chatgpt.dhexx.cn/article/0NqmqDUO.shtml

相关文章

vue框架安装mock

mock是&#xff1a;通过随机数据,模拟各种场景。 开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 用法简单 符合直觉的接口。 1、安装mock前先安装axios请求 &#xff1a;** npm install axios --save** 安装成功axios的链接&#xff1a; 2、安装mo…

【甄选靶场】Vulnhub百个项目渗透——项目十六:FristiLeaks_1.3(文件上传,py脚本改写,sudo提权,脏牛提权,源码获取)

Vulnhub百个项目渗透 Vulnhub百个项目渗透——项目十六&#xff1a;FristiLeaks_1.3&#xff08;文件上传&#xff0c;py脚本改写&#xff0c;sudo提权&#xff0c;脏牛提权&#xff0c;源码获取&#xff09; 靶场地址 &#x1f525;系列专栏&#xff1a;Vulnhub百个项目渗透…

vue全家桶——vuex

本文主要介绍vuex【状态管理模式】&#xff0c;在介绍vuex前&#xff0c;需要重点说下一些概念 vue最大的特点之一。数据驱动视图&#xff0c;可以吧数据理解成状态&#xff0c;视图-view可以理解成用户看到的页面&#xff0c;页面是动态变化的&#xff0c;而这个变化必须是有…

博客园滑块验证码破解

极验最初的滑块验证码是两张图&#xff0c;首先出现的是原图&#xff0c;点一下出现凹槽&#xff0c;然后拖动滑块进去&#xff0c;注意拖拽速度就可以破解成功。 原理&#xff1a; 分别遍历扫描原图和有凹槽的图片像素&#xff0c;进行对比&#xff0c;像素不一致的位置就是凹…

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]

视频链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50&#xff1a;当前页面。 P51-100&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P051-100]_小白桶子的博客-CSDN博客 P101-135&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视…

【Vue】Mock.js的使用教程,入门级(附代码和案例)

Mock.js的使用&#xff08;附代码和案例&#xff09; 1、什么是mockjs 生成随机数据&#xff0c;拦截Ajax请求 了解一项技术&#xff0c;官网当然要知道 Mock.js 官网 2、程序 前端&#xff1a;访问后端接口&#xff0c;展示数据后端&#xff1a;后端负责业务逻辑&#xff0c…

YDOOK:vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element+ plus

YDOOK&#xff1a;vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element plus 1. 官网的指导安装使用方式尚未更新&#xff0c;显示的是&#xff1a; 2. 如果使用的是 npm 安装, 输入的代码为&#xff1a; npm install element-plus --save大陆建议使用…

使用Xposed对软件进行破解

入门 去AS里面新建一个NoActivity项目&#xff0c;最好把minimum版本调小 <!-- 加载Xposed模块--><meta-dataandroid:name"xposedmodule"android:value"true" /> <!-- 模块描述--><meta-dataandroid:name"xpose…

破解root密码精简版

破解root密码精简版&#xff1a; 1、重启虚拟机 2、在linux16末尾加上 rd.break,ctrlx执行 3、mount -o remount,rw /sysroot 把根以读写的方式挂载 挂在系统的根sysroot 4、chroot /sysroot 5、passwd root 6、输入新密码&#xff1a; 7、确认密码 8、touch /.autorelabel 标…

【word论文排版教程4】样式的应用

【word论文排版教程4】样式的应用 在使用样式处选择相应样式&#xff0c;同样可以使用之前设置的快捷键 标题比较长&#xff0c;使用软回车进行换行

【word论文排版教程2】论文章节安排及分节

【word论文排版教程2】论文章节安排及分节 论文章节可分为如下8个章节&#xff1a; 封面 中文摘要 英文摘要 目录 正文 参考文献 附录 致谢 输入封面&#xff0c;添加分解符 添加分解符效果 同样方法为其它章节添加分解符。

【word论文排版教程1】页面设置

【word论文排版教程1】页面设置 页面设置要求如下&#xff1a; 页面格式&#xff1a;纸张A4&#xff0c;上2.6cm&#xff0c;下2.6cm&#xff0c;左2.5cm&#xff0c;右2cm&#xff0c;装订线位置左侧&#xff0c;装订线0cm&#xff0c;无文档网格 页面布局->页面设置

毕业必备!推荐收藏的学位论文排版教程(word完整版)

本文将介绍学位论文的页面布局&#xff0c;标题格式&#xff0c;文档生成列表&#xff0c;插入公式&#xff0c;页眉页脚&#xff0c;生成目录、表格和图片的交叉引用、插入参考文献、英语翻译校对等内容和技巧&#xff0c;学习内容偏多&#xff0c;同学们可以先收藏下来&#…

毕业论文word文档排版教程(动图的方式演示,针对wps)

很久之前写好的文章&#xff0c;不知不觉毕业了那么久了 目录 1 常用快捷键 2 显示全部格式标记 3 因有手动换行符无法实现首行缩进 4 利用表格制作矩阵 5 因有英文(代码)和中文而导致空隙过大 6 设置页码和目录 xx 参考文献自动编号并更新文章中的序号 xxx 页…

Latex基本使用:论文排版

文章目录 前言一、参考文献引用二、插入符号1.插入希腊字母2.插入符号 三、插入公式三、插入图片总结 前言 记录使用Latex排版论文的方法。 一、参考文献引用 引用参考文献使用的是bib文件&#xff0c;首先在tex文件所在目录下新建txt文件&#xff0c;修改后缀为bib。 在谷歌…

texlive2020 + vscode 论文排版教程

这是我准备公开的第二篇技术博客&#xff0c;之前也写过一些简单的&#xff08;拿不出手的&#xff09;博文&#xff0c;但一直没信心公开&#xff0c;不过最后觉得也没啥&#xff0c;大家可以交流嘛&#xff0c;万一你写的有错&#xff0c;有好心人看见了指出的话那也是极好的…

毕业论文排版教程(word)桂林电子科技大学

摘要&#xff1a;满心欢喜地给导数发去初稿&#xff0c;换来了一句“格式乱起八糟”&#xff0c;你是否还在为论文排版而苦不堪言&#xff0c;认真看完这份教程&#xff0c;让你轻松搞定毕业论文排版。 毕业论文排版教程&#xff08;word&#xff09;桂林电子科技大学 样式图片…

【word论文排版教程3】制作样式和列表

【word论文排版教程3】制作样式和列表 一级标题&#xff1a;黑体小二&#xff0c;居中&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均1行。 二级标题&#xff1a;黑体小三&#xff0c;无缩进&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均0.5行。 三级及…

Word论文排版教程

设置样式 要求&#xff1a; 以下以修改“大标题”为例&#xff0c;其他以此类推 1、大标题 再点击右下角的“段落” 2、标题4… 我们发现word默认只显示了三级标题的样式&#xff0c;如果我们还要更多的样式&#xff1a; &#xff08;选择“所有样式”即可&#xff09; …

论文排版教程

论文排版教程 Tips 一、 常用键 Delete 向后删除 CtrlEnter插入一个分页符 Alt 插入公式 二、 单位可以直接输入 三、定制功能区提升效率 论文正题 一、信息栏制作方法 二、目录制作方法 三、页眉页脚设置 插入分节符 分节符的作用&#xff1a;使得前后两部分在语义上…