vue3中的ref与reactive

news/2024/12/26 12:13:26/

摘要

在vue3直接定义变量不是响应式数据

在vue3中定义变量更改变量页面是显示不出来的

在按钮中绑定一个函数,当我点击它的时候发生改变str值

点击前

点击后

点击后控制台显示更改数据,而页面中不显示数据,这就是vue3没触发响应式

使用ref和reactive可以完美结局,以下文章讲述如何使用ref和reactive来进行响应式操作

一、ref

ref是一个函数,是vue组合式api中的一个方法,主要作用就是定义一个响应式的数据、

<template><div><p>{{ msg }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref } from 'vue';// 定义变量
let msg: any = ref("你好世界")
// 绑定点击事件
let handleClick = () => {console.log(msg);}</script>

当我们点击更新变量得到是是一个ref对象

更改值操作-----------------------------(页面同步)

我们要获取value值,这样才能响应式

<template><div><p>{{ msg }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref } from 'vue';// 定义变量
let msg: any = ref("你好世界")
// 绑定点击事件
let handleClick = () => {// 修改数据必须加上value,因为被ref包裹的变量是一个ref对象msg.value = "你好地球"console.log(msg.value, ".value方法")}</script>

当我再次点击更新数据

直接发生响应式变化

l另外补充

    // unref可以直接提取ref定义的value值console.log(unref(msg), "unref方法")// isRef判断是不是一个ref定义的数据,是就返回true不是就返回falseconsole.log(isRef(msg), "isRef方法")

以后使用ref尽量使用.value

二、reactive

*reactive定义多个数据的响应式,返回的是一个proxy代理对象,被代理的对象叫做目标对象

reactive内部是通过es6的proxy实现的,通过代理对象将目标对象转为响应式数据

<template><div><p>名字:{{ msg.name }}<br>年龄:{{ msg.age }}<br>性别:{{ msg.sex }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue';// 定义变量
let msg: any = reactive({name: "张三",age: 20,sex: "男"
})
// 绑定点击事件
let handleClick = () => {console.log(msg, 'proxy代理对象')}</script>

页面输出

更改值操作-----------------------------(页面同步)

<template><div><p>名字:{{ msg.name }}<br>年龄:{{ msg.age }}<br>性别:{{ msg.sex }}<br>爱好:{{ msg.pin }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue';// 定义变量
let msg: any = reactive({name: "张三",age: 20,sex: "男",})
// 绑定点击事件
let handleClick = () => {msg.name = "李四"//在vue2中不先定义直接添加属性会导致视图不更新,解决办法this.$set//  在vue3中使用reactive可以msg.pin = "健身"console.log(msg, 'proxy代理对象')}</script>

使用reactive可以直接修改数据而且可以添加没定义的数据

三、ref与reactive区别?

1、ref区别

通过ref定义的基本数据类型

<template><div><p>{{ m1 }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue';// 定义变量
// 通过ref定义的基本数据类型
let m1 = ref("我是张三");// 绑定点击事件
let handleClick = () => {// 只要通过ref定义的基本数据类型,是一个ref对象,修改数据必须加上.valuem1.value = "我是李四";
}</script>

通过ref定义的复杂数据类型

<template><div><p>{{ m2.wifi.title }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue';// 定义变量
// 通过ref定义的复杂的数据类型
let m2 = ref({name: "小鸟",wifi: {title: "苹果",},
});// 绑定点击事件
let handleClick = () => {// 只要通过ref定义的复杂数据类型,是一个ref对象,只是内部会自动变成reactive代理对象的形式m2.value.wifi.title = "香蕉";console.log(m2);}</script>

2、reactive区别

reactive不能定义基本数据类型,只能定义复杂的数据类型

<template><div><p>{{ m3.wifi.title }}</p><button @click="handleClick">更新数据</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue';// 定义变量
// 通过reactive定义的复杂的数据类型,注意reactive不能定义基本数据类型
let m3 = reactive({name: "猴子",wifi: {title: "香蕉",},
});// 绑定点击事件
let handleClick = () => {// 只要通过reactive定义的复杂的数据类型,是一个proxy代理对象m3.name = "蜜蜂";m3.wifi.title = "糖水";console.log(m3);}</script>

3、reactive小问题

reactive弊端:赋值一一对应赋值页面可以响应式,页面更新

而整体赋值页面会渲染不上,只有控制台会有变化,而页面中无法更新

将数据obj对象可以直接赋值给reactive定义的m3中,但是不是响应式的(ref是可以的)

ref可以这样整体赋值,但是到后面得加.value

reactive整体赋值解决方法

方法一

创建这个arr[]对象可以是空对象!!

方法二

使用****Object.assign(原数据, 新数据)、

对象中添加多个新属性,则通过 **Object.assign(原数据, 新数据)**创建新对象

Object.assign(m3, obj)

方法三

使用forEach

使用forEach必须是数组形式

总结

ref和reactive是vue3组合式api中最重要的响应式api

ref是用来处理基本数据类型,reactive是用来处理复杂的数据类型

如果用ref处理复杂的数据类型,那么内部会自动将复杂的数据类型转为reactive代理对象的形式

ref内部:通过value属性添加getter,setter来实现数据的响应式

reactive内部:通过es6中的proxy来实现对对象内部所有的数据进行劫持

注意:ref定义的数据修改数据的时候需要加上.value,reactive不需要


http://www.ppmy.cn/news/1557791.html

相关文章

全志H618 Android12修改doucmentsui鼠标单击图片、文件夹选中区域

背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 在进入File文件管理器后,鼠标左击整个图片、整个文件夹可以选中该类型,进行操作,故代码分析以及客制化如下: 主要涉及的代码:…

观察者模式(sigslot in C++)

大家&#xff0c;我是东风&#xff0c;今天抽点时间整理一下我很久前关注的一个不错的库&#xff0c;可以支持我们在使用标准C的时候使用信号槽机制进行观察者模式设计&#xff0c;sigslot 官网&#xff1a; http://sigslot.sourceforge.net/ 本文较为详尽探讨了一种观察者模…

第二节:GLM-4v-9B数据加载源码解读

文章目录 前言一、GLM-4v-9B模型数据格式二、GLM-4v-9B数据处理源码1、训练数据加工源码(process_batch)2、评估与预测数据加工源码 三、GLM-4v-9B训练数据加工源码解读&#xff08;process_batch&#xff09;1、batched_conv原始数据获取源码解读2、数据batch循环初始化源码解…

CPU性能优化-基于源代码的CPU调优

一 在第二部分&#xff0c;我们将讨论如何使用CPU监控特性寻找CPU上运行的代码中可被调优的位置。对于性能敏感型应用程序&#xff0c;如大型分布式云服务&#xff0c;科学高性能计算软件&#xff0c;3A 级游戏等&#xff0c;了解底层硬件的工作原理是非常重要的。若在程序开发…

【数据结构】数据结构试题集Ver3 第六章 树

关注作者了解更多 我的其他CSDN专栏 求职面试 大学英语 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处…

【数据科学导论】第一二章·大数据与数据表示与存储

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;数据处理与分析_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言…

React Props 完整使用指南

React Props 完整使用指南 1. 类组件中的 Props 1.1 基本使用 // 父组件 class ParentComponent extends React.Component {render() {return (<ChildComponent name"John"age{25}isStudent{true}hobbies{[reading, swimming]}/>);} }// 子组件 class Child…

Pandas系列|第二期:Pandas中的数据结构

1.Pandas中的数据结构&#xff1a;Series和DataFrame Pandas 的主要数据结构是 Series &#xff08;一维数据&#xff09;与 DataFrame&#xff08;二维数据&#xff09;&#xff0c;这两种数据结构足以处理金融、统计、社会科学、工程等领域里的大多数典型用例。 Series 是一…