Vue3组合式API——reactive和ref函数讲解

1.reactive()函数的作用

reactive函数只能支持对象类型的函数。返回的结果是一个响应式对象。

第一步,导入函数

import { reactive } from 'vue'

第二步,执行函数,传入一个对象类型的参数,变量接收,返回值state为一个响应式对象,挂载在dom里面改变的时候可以实时更新。

const state = reactive({
	count:0
)}

在这里插入图片描述
在这里插入图片描述
如果state后面的对象不用reactive函数包裹的话,点击按钮的话视图时不会更新的。
在这里插入图片描述

2.ref函数的作用

ref函数里面接收一个简单类型或者对象类型的数据,并返回一个响应式的对象。
ref函数包装的变量,修改值的时候必须添加.value属性进行修改。
在这里插入图片描述
在这里插入图片描述

3.小结

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值