Vue3.0学习笔记（四）

最新推荐文章于 2024-05-10 11:07:15 发布
最新推荐文章于 2024-05-10 11:07:15 发布
阅读量186 收藏
点赞数
分类专栏： # Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijieling123/article/details/117413619
版权

学习视频

P17shallowRef本质

ShallowRef监听的是.value的变化,因为底层本质上value才是第一层

P18,19 toRaw

从Reactive和ref中获取原始数据
有一些操作不需要更新UI界面的时候，可以通过toRaw拿到原始数据，对原始数据进行修改，这样就不会修改UI界面，性能就好
注：如果想通过toRaw拿到ref的原始数据，要输入.value的值 （ref的本质）

P20 MarkRaw

数据永远不被跟踪，不更新界面

P21,22 toRef, toRefs

toRef的本质是引用，修改的响应式数据会影响到原始数据，但不会更新界面；
ref是复制，修改的数据不会影响到原始数据，界面会更新
toRef应用场景：
想把响应式数据和原始数据关联起来，但还不想改变界面

toRefs
某个对象的多个属性
在这里插入图片描述

注：这两个方法都是用来做性能优化的

P23,24 customRef

作用：网络请求的代码可以写在自定义ref里面
在这里插入图片描述

lijieling123
关注
专栏目录
vue3的reactive对象
a3337779的博客
08-26 531
可以看到reactive直接返回一个Proxy对象，而ref是请求调用了reactive，之后使用对象尽量使用reactive，因为可以减少.value的写法，使你的代码可读性更高。内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。reactive定义的响应式数据是“深层次的”。的响应式数据（基本类型不要用它，要用。接收一个对象（或数组），返回一个。
Vue3 源码阅读（6）：响应式系统 —— ref
f18855666661的博客
08-14 2376
ref API 的官方文档点击这里，官网中需要注意的点是：如果参数是一个对象的话，ref 的内部会使用 reactive 对参数进行一层转化封装，若要避免这种深层次的转换，请使用shallowRef()来替代 ref。
vue 3.x 更改包之后运行不起来，显示关键词 class RefImpl，_rawValue；的解决方案
qq279202647的专栏
07-04 1292
Module parse failed: Unexpected token (763:13) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | } | class RefImpl { > _rawValue; | .
【vue3】使用toRaw，方法获取变量的原始值，便于调试
qq_17335549的博客
10-27 3456
【vue3】使用toRaw，方法获取变量的原始值，便于调试
vue3学习 4.toRaw
热门推荐
weixin_43152108的博客
06-25 1万+
1.toRaw 获取原始数据不是引用关系 而是全等关系 1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用 做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,
vue 3.0学习笔记(从入门到精通)
10-07
Vue 3.0是Vue.js框架的最新版本，它带来了许多...总之，Vue 3.0学习涵盖了许多方面，从基础的模板语法到高级的响应式机制，以及组件开发和路由管理。通过深入理解这些知识点，你将能够熟练地运用Vue 3.0进行前端开发。
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
VUE3.0学习笔记手打
05-25
VUE3.0学习笔记，节省你的学习成本
reactivity.rar
07-04
解决vue3.x class RefImpl 错误，替换node_modules\@vue\reactivity目录即可
vue3获取原始值
最新发布
m0_65037354的博客
05-10 539
在 Vue 3 中，`_rawValue` 是 `ref` 内部的一个属性，它用来存储 `ref` 的原始值，也就是未经响应式处理的值。如果你需要获取未经处理的值，更加推荐的做法是在一个适当的生命周期钩子或计算属性中使用 `ref` 的 `value`，或者使用其他非侵入性的方法来处理值。虽然一般不推荐直接访问 `_rawValue`，因为它是一个内部实现细节，可能会在未来的 Vue 版本中发生变化，但了解它的存在对于理解 `ref` 的工作原理是有帮助的。这个值是未被 Vue 的响应性系统包装的原始值。
关于Vue3 Proxy下的Target的数据解析
m0_53136368的博客
06-27 1218
0给我们提供的新方法，toRaw方法是把被reactive或readonly后的Proxy对象转换为原来的target对象。
尤雨溪：Vue3 中推荐使用 Ref 而非 Reactive
weixin_48230016的博客
04-01 1260
vue3中，ref和reactive 都可以将数据作为响应式数据，在代码中，ref比reactive多带着一个 .value，常常让人觉得代码过长，显得难看，而在模板中则不需要。所以在使用时，一开始都更偏向于reactive？那为啥尤大还是更推荐ref？
Vue3 - 获取 Proxy 对象代理中包裹的 “真实数据“，解决对象或数组打印后是 Proxy 对象无法拿到原始数据的问题（提供 2 种详细解决方案）
王佳斌
03-01 1万+
vue3如何取出proxy对象的值，vue3 Proxy 对象怎么获取到真实数据，vue3中的对象时为proxy对象如何获取值，vue3 获取ref里Proxy里的数据，vue3获取reactive中Proxy里的数据，vue3中如何获取proxy包裹的数据，vue3为什么里面的数据都是proxy对象类型，vue3中获取proxy包裹的数据,拿到原始对象，vue3数据变成了proxy如何解决，vue3中的对象时为proxy对象,如何获取值，vue3中获取proxy原始对象的问题，vue3获取proxy代理对
Web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、上传、showDirectoryPicker、showOpenFilePicker
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
01-17 867
Web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、上传、showDirectoryPicker、showOpenFilePicker
vue3响应式原理之Ref
SK_study的博客
06-01 8169
二. 实现 1. ref 函数 我们调用的ref函数，传进来一个 val 值，调用 函数，我们来看下该函数的实现 2. createRef 函数 该函数里边做了一个判断，该值如果已经是一个,则直接返回，否则创建一个 Ref 实例，让我们看下 类的实现 3. RefImpl 类的实现 定义了四个变量 _value: 用来保存加工后实现响应化的值 _rawValue: 用来保存当前未经加工过的值 dep: 用来收集依赖，是一个 类型 _v_isRef: 用来标识该值是否经过 ref 加工 在中，我们为 和
【Vue3 第六章】ref、toRef、toRefs、toRaw 方法应用
前端知识分享喵
12-29 5862
ref、toRef、toRefs、toRaw 方法应用
解决 vue3 中 Proxy(Object) 对象无法直接读取或使用
m0_68196864的博客
12-26 2673
第二步：直接使用 toRaw(obj)，其中 【obj】为响应类型数据 【value 】为普通类型数据。第一步：引入 toRaw 方法，toRaw 可以将响应类型数据转化为普通类型数据。
尚硅谷vue2.0 vue3.0笔记
10-19
尚硅谷是一家IT培训机构，他们提供了Vue2.0和Vue3.0的笔记。其中Vue2.0的笔记包括Vue2.0的响应式、组件化开发、路由、Vuex、axios等内容；...如果你想深入学习Vue框架，可以考虑参考尚硅谷的Vue2.0和Vue3.0笔记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值