vue3 - ref函数处理基本类型

最新推荐文章于 2024-09-23 10:02:33 发布
最新推荐文章于 2024-09-23 10:02:33 发布
阅读量7.7k 收藏 15
点赞数 5
分类专栏： vue3 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120257415
版权

需求：点击按钮更新页面数据

如果这么写，数据会更新，但是页面不会更新：
在这里插入图片描述

在这里插入图片描述

如果想让页面显示与数据同步，也就是响应式更新，要用ref函数

在这里插入图片描述
ref包裹后是个对象，是refImpl的实例对象
在这里插入图片描述
refImpl是 reference+implement译为引用实现。也就是说在vue3里面，如果想办字符串、整形这类基本数据类型变成响应式的，应该用ref函数包裹，也就是把该基本数据类型变成引用实现的实例对象。

在这里插入图片描述
在这里插入图片描述
可以看到ref包裹基本数据类型，也就是给该基本数据类型加上gettter，读取vue源码可知，在vue3中，也是通过defineobjectproperty实现基本数据类型的响应式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以读的使用，要使用xx.value去读。人家vue3底层是调用get。改的时候底层调用的是set

在这里插入图片描述
此时，点击按钮页面就会响应式了
在这里插入图片描述

提示：

模板template里面使用变量值不用.value，因为vue3在编译template的时候发现引用了ref对象会帮忙读取上去。

在这里插入图片描述

总结：

在这里插入图片描述

Vue3 - ref 基本类型（通俗易懂，详细教程）
王佳斌
11-15 4193
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函数和reactive函数二
qq_50563868的博客
05-08 578
<!-- App.vue-ref --> <template> <div> <h1>我是APP组件</h1> <h2>姓名：{{ name }}</h2> <h2>年龄： {{ age }}</h2> <h2>工作： {{job.type}}</h2> <h2>薪水： {{job.salary}}</h2>
vue3-ref和reactive
qq_52135740的博客
08-02 697
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
Vue3-day3-Ref-Reactive
最新发布
qq_58016329的博客
09-23 788
RefImplref对象refref对象valuexxx.value.valuenamename.value。
vue3返回的数据输出的类型是RefImpl
2301_80636534的博客
06-11 885
value 是要转换为 ref 对象的原始值，__v_isShallow 是一个布尔值，表示是否使用浅层响应式。RefImpl 会将 value 转换为 _rawValue 和 _value 两个属性，_rawValue 是原始值的副本，_value 是原始值的响应式版本。当设置 value 时，会判断新值和旧值是否有变化，如果有变化，则更新 _rawValue 和 _value，并调用 trigger 函数通知依赖更新。函数的作用是返回一个响应式对象的原始对象。顺带了解了一些知识，一起记录一下。
Vue基础知识：vue3 对于 ref 值的类型定义
学习笔记
05-31 653
意思是 vue3 变量由 vue 来控制，上面的 name 变量值并不是原始的字符串。从 vue2 到 vue3 之后，所有变量值都需要添加。上面这个完整的定义其实是这样的。平常不在变量后面声明它的类型。方法本身就返回值类型就是。而是被套了一层类型为。
Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
测试
09-04 6075
props数据，ref和reactive和ObjectRefImpl和proxy
详细分析Vue3中的ref（附Demo）
码农研究僧的博客
05-14 2675
ref 是 Vue 3 中用于创建响应式数据的函数 接收一个初始值并返回一个包含了该值的响应式引用对象 与 Vue 2.x 中的 data 属性不同，ref 返回的是一个对象，而不是一个直接的值
vue3-demo2.rar
02-05
Vue3原生支持TypeScript，提供了类型定义，使得开发者在使用Vue时能获得更好的类型检查和IDE支持，提高代码质量。 9. **Vue CLI 4**： 配合Vue3，Vue CLI也升级到了4.x，提供了更强大的脚手架工具，支持Vue3项目...
Vue3入门到精通--ref以及ref相关函数
2401_84092456的博客
05-06 711
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue3-demo 示例代码
10-08
Vue3 是 Vue.js 框架的最新版本，它带来了许多改进和新特性，...通过研究这个“Vue3-demo”示例，你不仅可以掌握 Vue3 的基本使用，还可以了解到如何在实际项目中应用这些新特性和最佳实践，从而提升你的前端开发技能。
vue3-read源码.zip
08-21
6. **TypeScript支持**：Vue 3全面拥抱TypeScript，提供了完整的类型定义，这为开发者提供了更强的类型检查和更好的代码工具支持。 7. **性能优化**：Vue 3通过优化虚拟DOM算法、使用Proxy替换Object.observe等方式...
Vue3 ref函数
sinat_29304113的博客
12-21 204
作用 定义一个响应式的数据。 语法 const xx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） JS中操作数据：xxx.value 模板中读取数据：不需要.value，直接<div>{{xxxx}}</div> 备注 接收的数据可以是：基本类型，也可以是对象类型 基本类型的数据：响应式依然是Object.defineProperty()的get与set完成的。 对象类型的数据：内部“求助”了Vue3.0中的
Vue3新特性全面剖析
每天都要努力学习哦~~
12-20 1582
一款框架诞生需要的阶段 查看版本:npm view vue versions 开发 alpha版：内部测试版 α beta版：公开测试版 β rc版：Release Candidate（候选版本） stable版：稳定版 npm i vue@lasted:下载的是vue2 vue2 vuex3 vue-router3 element-ui 2 npm i vue@next：下载的是vue3 vue3 vuex4 vue-router4 element-plus 1 npm i.
【Vue3】使用ref与reactive创建响应式对象
null18的博客
02-20 6273
先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。
【Vue3】Ref 全家桶
小秀的博客
07-25 199
接收一个内部值并返回一个响应式且可变的 ref 对象。
vue3Watch监听RefImpl对象的说明
moxunjinmu的博客
03-07 5848
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
SK_study的博客
06-01 8200
二. 实现 1. ref 函数 我们调用的ref函数，传进来一个 val 值，调用 函数，我们来看下该函数的实现 2. createRef 函数 该函数里边做了一个判断，该值如果已经是一个,则直接返回，否则创建一个 Ref 实例，让我们看下 类的实现 3. RefImpl 类的实现 定义了四个变量 _value: 用来保存加工后实现响应化的值 _rawValue: 用来保存当前未经加工过的值 dep: 用来收集依赖，是一个 类型 _v_isRef: 用来标识该值是否经过 ref 加工 在中，我们为 和
手撸vue3核心源码——响应式原理(ref)
qq_63204040的博客
07-22 596
手撸vue3核心源码——响应式原理(ref)
vue3 ref函数模板引用
08-07
在 Vue 3 中，`ref` 函数用于创建响应式的数据。它可以将普通的 JavaScript 值转换为一个具有响应式特性的引用对象。 要使用 `ref` 函数，首先需要在 Vue 文件中导入它： ```javascript import { ref } from 'vue'; ``` 然后，可以在组件中使用 `ref` 函数来创建响应式的变量： ```javascript export default { setup() { const myValue = ref('Hello, Vue 3!'); return { myValue }; } } ``` 在模板中，可以通过 `.value` 来访问 `ref` 创建的引用对象的值： ```html <template> <div> {{ myValue.value }} </div> </template> ``` 这样，`myValue` 就成为了一个响应式的变量，当它的值发生变化时，相关的视图也会自动更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值