Vue3语法之ref&reactive

已于 2024-01-09 10:47:53 修改
阅读量118 收藏
点赞数
分类专栏： Vue3学习记录 文章标签： javascript 前端 vue
于 2023-11-05 14:19:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsfufua/article/details/134229278
版权
本文介绍了React中的ref()函数用于声明响应式数据，强调了.value的使用和ref与reactive的区别。还提到了ref不传参的用途，以及reactive的响应式特性、适用场景和注意事项。
摘要由CSDN通过智能技术生成

声明响应式状态之 ref()

ref()传参——用于声明响应式数据

1.在代码中使用ref声明的响应式数据需要.value

在这里插入图片描述

2.模板中使用看文档截图是不需要.value

在这里插入图片描述
3.ref声明的响应式数据是具备深层次的响应式，且可以用于声明任何数据类型的值

在这里插入图片描述
4.非原始值将通过 reactive() 转换为响应式代理
在这里插入图片描述

5.对于深层次嵌套的数据希望其只具备浅层次的响应时使用 shallow ref

在这里插入图片描述

ref() 不传参 用于获取组件实例或DOM对象

1.组件实例身上获取组件实例
在这里插入图片描述
在这里插入图片描述
2. 在标签身上获取DOM
在这里插入图片描述

在这里插入图片描述

reactive

1.ref 是包装成一个.value的对象.value具备响应式，而reactive是直接整个对象具备响应式不需要.value
在这里插入图片描述
2.reactive能声明复杂数据类型不能声明基本数据类型
在这里插入图片描述
3.不能直接把整个对象替换掉，这样将丢失响应式
在这里插入图片描述
4.解构或传参时传过去的丢失响应式
在这里插入图片描述

只有这样才是响应式的
在这里插入图片描述

reactive注意点

  1. reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：
    在这里插入图片描述
    其中只有更改reactive()返回的代理对象proxy才是响应式的，直接对原始数据raw进行更改的话不是响应式的
    在这里插入图片描述

  2. 对于通过reactive()返回的代理对象再次进行代理的话返回自身

在这里插入图片描述

躺平阿福
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3-02-ref() 响应式详解
northcastle的博客
12-10 2044
vue3 中 使用 ref 声明响应式变量
二、【Vue3】——ref和reactive的使用、区别
yifei1234567的博客
03-28 7834
Vue3中实现数据响应式，用到的是组合式API中的ref和reactive函数，不同的是ref函数一般定义基本类型数据，而reactive函数用于定义一个对象类型的响应式数据。
vue3中ref的作用及ref和reactive之间的转化
YY的博客
12-12 3352
vue3中ref的作用
vue3 ref 传参
m0_50080847的博客
12-23 1710
1 子组件 Demo 里： <script setup> import {ref} from 'vue' let ceshi = ref(520) defineExpose({ // 通过 defineExpose 将 子组件 内部 数据 暴露给 父组件 ！！！！ ceshi }) </script> 2 父组件： <template> ...
vue3中的reactive
qq_44777163的博客
06-06 289
点击更新视图层某一个数据
vue3学习笔记——声明响应式数据 ref | reactive
m0_46408862的博客
05-15 2614
声明响应式数据 ref | reactive 都是vue3声明响应式数据的函数 响应式原理： ES5:Object.defineProperty -> ES6: Proxy [优点] 1.懒代理,提高性能 2.告别Vue.set ref val: 监听基本数据类型的变化 需要import 引入ref setup(){ console.log("setup执行"); const girl = ref("芝麻开花") console.log(girl)
ref函数与reactive函数
qq_44473483的博客
08-18 1021
我们只知道在setup里面定义变量需要使用ref函数才能变成响应式，但是具体过程及使用方式却不太清除，今天总结下。 ref ref数据可以将非响应式数据转换为响应数据 创建数据 import {ref} from 'vue' export default { setup() { let name = ref('fufu') let age = ref(20) let love = ref({ fruits: ['watermelon', 'strawberry'], music:
Vue reactive ref v-bind 语法示例演示代码
最新发布
07-17
Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码...
vue3基础语法&示例demo.zip
02-21
7. **Ref和 reactive**：Vue3中的`ref`和`reactive`是用来创建响应式对象的。`ref`用于创建单个响应式值，而`reactive`用于创建整个响应式对象。这些在Composition API中起到了关键作用。 8. **Composition API与...
Vue3 01 setup ref reactive
weixin_58562753的博客
06-09 151
Vue3
vue3基础语法&示例demo.pdf
02-21
### Vue 3 基础语法与示例详解 #### Vue 3 概览 Vue 3 是 Vue.js 的一个重要版本更新，它不仅保持了 Vue 2 的核心特性，还在此基础上进行了大量的优化和增强。这包括但不限于性能提升、API 的简化以及对现代 ...
vue组件传参之ref引用传参（父拿子值）
阿小绿的博客
07-15 5088
子组件拿父组件的变量值。 <template> <view class="content"> <view class="text-area"> <text @click="toGo">点击我跳转页面哦</text> </view> <mo-ban :han="'我是小涵涵'" ref="hellosss"></mo-ban> </view> </template>
Vue3 reactive和ref详解
qq_32907491的博客
10-01 3460
在大家使用vue3编写组件的时候，通常会把数据暴露到模板中使用：在我们修改响应式数据的值时，不会触发重新渲染再点击按钮之后，从控制台中可以看出数据已经改变，但是页面文字并没有做出相应的改变。因为扩展运算符(...)导致，响应式对象变成了一个普通对象。把一个普通对象暴露到模板中使用，是不会在渲染函数与响应式数据之间建立响应式联系的。return {...obj//等价于return {bar:'vue3'能否在副作用函数中，即使通过普通对象来访问属性值也能够建立响应式联系？
Vue 中的 ref 与 reactive：让你的应用更具响应性（上）
你若盛开，清风自来
01-03 2008
ref和reactiveref的背景和重要性：在 Vue 2 中，通过使用v-bind和v-on等指令来实现数据的双向绑定。但是，在某些情况下，需要直接操作 DOM 元素或组件实例，这时候就需要使用ref属性。ref允许你通过引用的方式访问 DOM 元素或组件实例，从而方便地进行直接操作。在 Vue 3 中，ref有了一些改进，它现在可以引用任何类型的值，包括组件实例、函数、对象等。reactive的背景和重要性：在 Vue 2 中，响应式系统是基于对象的属性监听实现的。
vue组件之间传参方式
Senora的博客
08-27 1879
1.props 父向子，单向绑定，子组件数据随父组件更新而响应式更新 2.$emit 子向父，$emit 绑定一自定义事件，这个事件被执行时将参数传递给父组件，父通过v-on监听并接收参数 3.eventBus兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 emit 传数据，接收方通过on 接受数据...
Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
测试
09-04 5660
props数据，ref和reactive和ObjectRefImpl和proxy
Vue3 ref和reactive定义变量、方法
林中明月间丶
04-05 7034
https://blog.csdn.net/x413666/article/details/112173004 //在VUE3中 <div>{{num}}</div> import {ref,reactive,computed} from 'vue' //setup：因为在执行setup时还没有执行created所以不能使用data和methods，setup是处于 beforecreated和created生命周期之间的所以不能使用。
vue3 的组件通信以及ref的使用&v-model
热门推荐
汉堡请不要欺负面条
07-05 1万+
vue3 组件通信以及ref的使用
【vue设计与实现】非原始值的响应式方案 11-代理Set和Map-建立响应联系
loyd3的博客
06-30 199
现在可以着手实现Set类型数据的响应式方案了。以下面的代码为例： p.add函数向集合中添加数据，这个行为会间接改变集合size的属性值，所有期望是副作用函数会重新执行。为了实现效果，需要在访问size时调用track函数进行依赖追踪，然后在add方法执行时调用trigger函数触发响应。 下面代码展示如何进行依赖追踪 这里需要注意，响应联系需要建立在ITERATE_KEY于副作用函数之间，因为任何新增、删除操作都会影响size。接下来看如何触发响应，显然我们需要实现一个自定义的add方法才行，如下代码：
vue3ref和reactive的用法
08-12
在 Vue 3 中，可以使用 `ref` 和 `reactive` 两个函数来创建响应式数据。 `ref` 函数用于创建一个包含初始值的响应式对象。例如，下面的代码创建一个包含初始值为 0 的响应式计数器： ```javascript import { ref ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值