Vue3 ref函数和reactive函数

文章介绍了Vue中的ref和reactive函数在创建响应式数据和处理基本/对象/数组类型数据时的不同用法,强调了ref用于基本类型和浅层对象,而reactive适用于对象深层结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、ref函数

我们在setup函数中导出的属性和方法虽然能够在模板上展示出来,但是并没有给属性添加响应式,因此,我们需要使用ref函数来为我们的数据提供响应式。

(一)引入ref函数

import { ref } from "vue";

(二)创建响应式数据

const 属性名 = ref(属性值);

这里我们为什么可以用const进行声明?

如果我们定义三个响应式属性,并输出,就会发现这些属性都被打包为RefImpl 对象(也称为引用对象或ref对象),我们可以通过 .value 值来访问和修改我们的属性。

因此,即使我们使用const 来定义一个变量,改变对象中的属性并不会对对象本身产生什么影响。

 

这里的传入值为对象,value就会变为一个Proxy对象(后面会解释其原理) 

 (三)响应式数据的读取和修改

基本类型的数据:变量.value = 值

对象类型的数据:变量.value.属性名 = 值

注意:我们在模板中读取属性的时候并不需要使用.value,ref的原理仍然是Object.defineProperty

二、reactive函数

reactive函数和ref函数的作用类似,不过是定义一个对象或数组类型的响应式数据。

(一)引入reactive函数

import { reactive } from "vue";

(二)创建响应式数据 

const 属性 = reactive(对象)  或  const 属性 = reactive(数组)

返回的是一个使用Proxy代理的对象

 

(三)响应式数据的读取和修改 

对象类型的数据:对象.属性名 = 属性值

数组类型的数据:数组[x] = 元素值

 

注意:使用reactive函数定义的响应式数据是“深层次的”,内部使用的Proxy代理 

三、ref函数和reactive函数的区别

(一)使用条件

        1. ref用于定义:基本数据类型、对象数据类型

        2. reactive用于定义:对象数据类型

(二)使用区别

        1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value)

        2. reactive如果重新分配一个新的对象就会失去响应式(可以使用Object.assign解决)

 

(三)使用场景

        1. 定义基本数据类型必须使用 ref函数

        2. 若需要一个对象数据类型,且层级不深 ref和reactive都可以

        3. 若需要一个对象数据类型,且层级较深,推荐使用 reactive函数

好的,我可以用中文回答你的问题。 在Vue 3中,`ref``reactive`都是用于在Vue组件中创建响应式数据的函数。 `ref`函数接受一个参数,并返回一个响应式的对象。这个参数可以是任何JavaScript类型,包括对象、数组、字符串、数字等等。`ref`函数返回的响应式对象包装了传入的参数,使得该参数的任何变化都会被Vue自动检测到并触发重新渲染视图。要访问`ref`对象的值,需要使用`.value`属性。 例如: ``` import { ref } from 'vue' const count = ref(0) console.log(count.value) // 输出0 count.value++ // 修改count的值 console.log(count.value) // 输出1 ``` `reactive`函数也接受一个参数,但这个参数必须是一个普通的JavaScript对象。`reactive`函数会递归地将这个对象的所有属性转换成响应式的对象,从而实现响应式数据的功能。要访问`reactive`对象的值,可以直接使用对象属性访问方式。 例如: ``` import { reactive } from 'vue' const state = reactive({ count: 0 }) console.log(state.count) // 输出0 state.count++ // 修改state对象中count属性的值 console.log(state.count) // 输出1 ``` 总的来说,`ref``reactive`都是Vue 3中非常有用的响应式数据函数,用于实现组件中的数据绑定响应式渲染。如果你只需要创建单一的响应式值,使用`ref`更为简单;如果你需要创建一个包含多个属性的响应式对象,使用`reactive`更为方便。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值