vue3 - ref函数处理对象类型数据

最新推荐文章于 2024-08-14 00:29:25 发布
最新推荐文章于 2024-08-14 00:29:25 发布
阅读量1.5w 收藏 4
点赞数 4
分类专栏： vue3 文章标签： html vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120319075
版权

打印一下用ref包裹的对象
在这里插入图片描述

在这里插入图片描述

打印出来发现，变成proxy对象，且不需要通过.value的形式获取响应式数据的值了。此时改成这么写：

在这里插入图片描述
页面数据更新了

在这里插入图片描述

分析：
refimpl和proxy的区别：

如果对象也是用refimpl包裹对象，则会出现这种情况：
在这里插入图片描述
导致需要job.value.age.value才能获取到值，但实际不是，说明不是refimpl对象。说明也没用到get、set，因为refimpl就是对get、set的封装。

实际上在vue3里面处理引用数据类型变成响应式用的是proxy代理，也就是说表面上ref可以包裹引用数据类型，实际上vue3调用的是reactive

在这里插入图片描述

公孙元二
关注
专栏目录
Vue3 - ref 基本类型（通俗易懂，详细教程）
王佳斌
11-15 4138
vue官方文档，vue ref()官方文档教程，vue3-ref函数处理基本类型，vue3中ref的理解，Vue3中 ref 属性详解，vue3 之 ref，Vue3学习之ref()用法，vue3 ref 的了解和使用，vue3如何使用ref获取元素，vue3 ref函数，vue3之ref获取元素，Vue3 - ref 基本类型（通俗易懂，详细教程）。
Vue3入门到精通--ref以及ref相关函数
2401_84092456的博客
05-06 678
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5453
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
学习vue3系列ref
文摘资讯
08-01 2948
基于vite初始化项目npm init vite-app <project-name> cd <project-name> npm install npm run...
一篇文章搞懂Vue3响应式：Ref和Reactive
最新发布
AQiukai的博客
08-14 1190
关于vue3中ref和reactive相关知识点整理
Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs)
qq_41400354的博客
05-18 6899
toRef ref toRefs
VUE框架Vue3下使用ref函数包裹的对象实现响应式处理------VUE框架
春风若有怜花意，可否许我再少年
12-22 1200
VUE框架Vue3下使用ref函数包裹的对象实现响应式处理------VUE框架
Vue3 的函数式编程
汉堡请不要欺负面条
07-13 2269
vue3 setup 所有单独的功能模块全部都独立开来，最后在 setup 函数中统一暴露给模板使用。我们甚至可以把组合后的逻辑放在单独的js文件中，这样会使我们的代码逻辑更直观，可维护性更高，复用性更强。...
Vue3【组合式API、setup、响应式原理、ref对象解包、模板的语法、v-bind】
m0_52896752的博客
01-22 2094
Vue3【组合式API、setup、响应式原理、ref对象解包、模板的语法、v-bind】
vue3-demo2.rar
02-05
在Vue3中，`ref`被用来创建响应式对象，它返回一个包含一个可变的底层值的引用。这比Vue2中的`v-model`更加灵活，可以用于任何类型的数据，不仅限于表单元素。`ref`在模板中使用时需要使用`.value`来访问其值，而其...
Vue3-ref函数和reactive函数
WFL804203164的博客
01-14 190
ref函数 作用：定义一个响应式的数据，或者说是生成一个引用实现对象 语法：const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象） JS中操作数据需要：xxx.value 模板中读取数据：直接使用即可 PS： ref接收的数据可以是基本类型数据，也可以是对象类型 基本类型的数据：响应式是靠Object。defineProperty()的get和set完成的 对象类型的数据：内部使用了reactive函数 <template>
Vue3-demo 示例代码
10-08
在 Vue3 中，`ref` 和 `reactive` 用于创建响应式数据。`ref` 用于创建一个可直接响应的引用，而 `reactive` 用于创建一个响应式的对象。它们是 Vue3 实现数据响应式的核心工具。 3. **Setup 函数**： Vue3 的每...
vue3使用ref和reactive定义数据
m0_63466615的博客
04-26 6155
首先需要先从vue解构 import {reactive, ref } from "vue"; 定义数据 let state = reactive({ //使用reactive定义数据，需要写成对象的格式 global: [], }); let test = ref([]); //使用ref定义数据，直接定义即可 let testObj = ref({}); 数据赋值 // 获取所有商品 productAll().then(res => { state
Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据
祈澈菇凉
09-20 1062
参考文档 参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/ 1：ref定义单个数据 在vue3.0中，用谁就要引用谁 import{ defineComponent,ref} ...
vue3返回的数据输出的类型是RefImpl
2301_80636534的博客
06-11 762
value 是要转换为 ref 对象的原始值，__v_isShallow 是一个布尔值，表示是否使用浅层响应式。RefImpl 会将 value 转换为 _rawValue 和 _value 两个属性，_rawValue 是原始值的副本，_value 是原始值的响应式版本。当设置 value 时，会判断新值和旧值是否有变化，如果有变化，则更新 _rawValue 和 _value，并调用 trigger 函数通知依赖更新。函数的作用是返回一个响应式对象的原始对象。顺带了解了一些知识，一起记录一下。
vue3 获取ref/reactive对象里Proxy里的数据
rikimiao的博客
06-16 2205
vue3 获取ref/reactive对象里Proxy里的数据
Vue3 ref函数
sinat_29304113的博客
12-21 190
作用 定义一个响应式的数据。 语法 const xx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） JS中操作数据：xxx.value 模板中读取数据：不需要.value，直接<div>{{xxxx}}</div> 备注 接收的数据可以是：基本类型，也可以是对象类型 基本类型的数据：响应式依然是Object.defineProperty()的get与set完成的。 对象类型的数据：内部“求助”了Vue3.0中的
【Vue3】Ref 全家桶
小秀的博客
07-25 183
接收一个内部值并返回一个响应式且可变的 ref 对象。
vue3Watch监听RefImpl对象的说明
moxunjinmu的博客
03-07 5801
vue3Watch监听RefImpl对象的说明watch监听RefImpl对象 watch监听RefImpl对象 <script> import { ref, reactive, watch } from "vue"; export default { name: "Demo", setup() { // 数据 let sum = ref(0); let msg = ref("你好啊"); let person = ref({ name: "张
vue3 ref对象类型
09-12
在Vue 3中，`ref`是一个用于创建响应式数据的函数。它可以将普通的JavaScript对象转换为一个具有响应式特性的对象。 当使用`ref`时，你可以传递一个初始值给它，这个初始值可以是任意JavaScript类型的值，包括对象、数组、字符串、数字等。`ref`函数会返回一个包装后的响应式对象。 例如，创建一个响应式的对象： ```javascript import { ref } from 'vue'; const user = ref({ name: 'John', age: 25, }); console.log(user.value.name); // "John" ``` 需要注意的是，响应式对象在访问和修改时需要使用`.value`来进行操作。这是因为`ref`创建的是一个包装后的对象，要访问内部的值必须使用`.value`。 如果想要创建一个响应式的基本类型数据（如字符串、数字等），可以直接在`ref`中传递原始值即可： ```javascript import { ref } from 'vue'; const count = ref(0); console.log(count.value); // 0 ``` 希望这个回答能够解决你的问题！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值