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

vue3 的ref和reactive的区别?

ref和reactive都是创建响应式数据的方式,它们的数据类型,使用场景以及性能有所不同,如:

1数据类型:

ref:主要用于创建单个变量的响应式引用,无论数据类型是基本数据类型还是引用数据类型,ref都能吧它封装一个响应式实体,它返回的是一个对象,如果访问需要使用value来读取对象中的数据

reactive:主要适用于复杂数据类型,比如数组对象,它返回的是proxy对象,可以直接访问

2使用场景:

ref:需要创建一个响应式的基本数据类型时使用,如简单的计数器或标志位

reactive:需要创建一个响应式的复杂对象或者数组时使用,如用户信息管理或嵌套数据结构

3性能:

ref:对基本数据类型,ref通常具有更高的性能,因为它减少了,proxy的使用,简化了应用系统的恶实现

reactive:对复杂的数据结构reactive通过使用proxy直接操作对象属性,提供了更好的灵活性能和响应式追踪机制

import { ref, reactive } from 'vue';

// 使用ref创建响应式基本数据类型
let count = ref(0);
console.log(count.value); // 输出0
count.value++; // 增加计数器

// 使用reactive创建响应式复杂对象
let user = reactive({
  name: 'Alice',
  age: 30,
});
console.log(user.name); // 输出Alice
user.name = 'Bob'; // 修改属性值


http://www.kler.cn/a/451395.html

相关文章:

  • Batch_Size对神经网络训练效率的影响:一个PyTorch实例分析
  • ES已死,文本检索永生
  • 面向未来的教育技术:智能成绩管理系统的开发
  • 机器学习04-为什么Relu函数
  • Day13 苍穹外卖项目 工作台功能实现、Apache POI、导出数据到Excel表格
  • 再服务器上建立新的编译环境
  • 3D造型软件solvespace在windows下的编译
  • elasticsearch 数据库查询很慢如何优化
  • Stable-diffusion-WebUI 的API调用(内含文生图和图生图实例)
  • DocFlow票据AI自动化处理工具,提升企业票据数字化管理效能
  • mybatis框架——缓存,分页
  • 【c++高阶DS】图
  • node.js的异步工作之---回调函数与回调地狱
  • 用Python在Excel工作表中创建、修改及删除表格区域
  • C#(事件)2
  • 第79期 | GPTSecurity周报
  • 《智启新材:人工智能重塑分子结构设计蓝图》
  • Krita安装krita-ai-diffusion工具搭建comfyui报错没有ComfyUI_IPAdapter_plus解决办法
  • [Vim][常用操作整理]详细讲解
  • 音视频学习(二十七):SRT协议
  • Excel 列名称转换问题 Swift 解答
  • LeetCode 343.整数拆分
  • #渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍11基于XML的SQL注入(XML-Based SQL Injection)
  • 考前96天 学习巩固 计算机、数学、英语
  • leetcode 3132. 找出与数组相加的整数 II 中等
  • MySQL追梦旅途之慢查询分析工具mysqldumpslow和pt-query-digest