当前位置: 首页 > news >正文

vue3 之 组合式API—reactive和ref函数

ref()

作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤:
1️⃣ 从 vue 包中导入 ref 函数
2️⃣在

<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>
reactive()

作用:接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤:
1️⃣ 从 vue 包中导入 reactive 函数
2️⃣ 在

在这里插入图片描述

<script setup>// 导入import { reactive } from 'vue'// 执行函数 传入参数 变量接收const state = reactive({msg:'this is msg'})const setSate = ()=>{// 修改数据更新视图state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>
总结

1️⃣ reactive和ref函数的共同作用是什么 ?
用函数调用的方式生成响应式数据

2️⃣ reactive vs ref ?
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive函数

3️⃣ 在实际工作中推荐使用哪个?
推荐使用ref函数,更加灵活

http://www.lryc.cn/news/295391.html

相关文章:

  • Python库-PyAutoGUI
  • 越权测试是什么?
  • H5 简约四色新科技风引导页源码
  • 使用 VTK 中的单元定位器来查找最近的点
  • 时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测
  • Xcode 15 及以上版本:libarclite 库缺少问题
  • Spring设计模式之单例模式
  • Fink CDC数据同步(二)MySQL数据同步
  • JavaWeb后端开发(第一期):Maven基础、Maven的安装配置、如何创建maven项目模块、maven的生命周期
  • Windows SDK(四)鼠标和键盘消息处理
  • LabVIEW汽车自燃监测预警系统
  • 数据图表方案,企业视频生产数据可视化
  • 【HarmonyOS应用开发】APP应用的通知(十五)
  • 开启一个服务,将服务器指定的文件读取,传播到网上其他终端
  • nii convert to 2D image【python】
  • C语言指针学习 之 指针是什么
  • 【文本到上下文 #10】探索地平线:GPT 和 NLP 中大型语言模型的未来
  • (四)elasticsearch 源码之索引流程分析
  • 飞天使-k8s知识点16-kubernetes实操1-pod
  • 【gcc】webrtc发送侧 基于丢包更新码率
  • 数字经济的未来:探索Web3的商业模式
  • Centos7部署MetaBase-v0.48.3
  • 【计算机网络】Socket的SO_TIMEOUT与连接超时时间
  • 解密 ARMS 持续剖析:如何用一个全新视角洞察应用的性能瓶颈?
  • 【OJ比赛日历】春节快乐 #02.10-02.16 #9场
  • 前端下载文件有哪些方式
  • vscode预览github上的markdown效果
  • 使用PaddleNLP识别垃圾邮件:用BERT做中文邮件内容分类,验证集准确率高达99.6%以上(附公开数据集)
  • 在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)
  • 拼音笔记笔记