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

1.3 vue响应式对象

对象

在js里,对象一般指复杂类型,对象,数组,函数等都能被称为Object对象。
对象:{key:value,key2:value,…}
数组:[value1,value2,…]

简单数据类型响应式(ref)
在Vue3中,一般不写data(){},在组合式API的setup中写的数据let 数据名,不是响应式的,如果需要响应式,只需要在相应的数据上加上一个ref()外壳。
如:

let x = ref(2);

不过在模板中想用ref响应数据可以直接用,而在js中用,需要以x.value的形式访问到数据。

复杂数据类型响应式(reactive)

对于对象的响应式,外面加上一层reactive()就变成了响应式对象proxy()。无论多深都能响应。
如:

let obj =  reative({name : '张三',gender:'男'
});

总结:
ref既可以处理简单类型也可以处理对象类型,推荐使用。不过对象类型底层是用reactive实现的响应式对象,ref的响应式对象都得需要.value才能摸到里面的数据。

复杂对象直接赋值

reactive响应式对象不能直接覆盖新的对象,需要借助函数
Object.assign(obj1,obj2);
ref响应式对象可以直接赋值新对象
obj1 = obj2
http://www.dtcms.com/a/282553.html

相关文章:

  • FATFS文件系统原理及其移植详解
  • PyTorch 损失函数详解:从理论到实践
  • 嵌入式学习-PyTorch(5)-day22
  • 【深度学习基础】PyTorch中model.eval()与with torch.no_grad()以及detach的区别与联系?
  • Vue 结合 Zabbix API 获取服务器 CPU、内存、GPU 等数据
  • 数据结构自学Day8: 堆的排序以及TopK问题
  • 前端Vue中,如何实现父组件打开子组件窗口等待子组件窗口关闭后继续执行父组件逻辑
  • DeepSeek(18):SpringAI+DeepSeek大模型应用开发之会话日志
  • 单片机(STM32-中断)
  • JS逆向 - YandexSmartCaptcha (worker线程)
  • 基于WebRTC构建应用的可复用模块
  • 下载webrtc M114版本源码只能使用外网googlesource源-命令版
  • i.mx8 RTC问题
  • TEngine学习
  • 【Noah-MP模型】陆面生态水文模拟与多源遥感数据同化的实践技术应用
  • JavaScript进阶篇——第六章 内置构造函数与内置方法
  • alpineLinux修改包管理为国内源
  • 越野小车结构设计\越野小车设计cad【6张】三维图+设计说明书
  • 【Java】【力扣】101.对称二叉树
  • 数据结构与算法——Leetcode215. 数组中的第K个最大元素
  • 中国1km分辨率逐月平均气温数据集 - matlab按shp批量裁剪
  • Git远程仓库与协作技巧详解
  • 【add vs commit】Git 中的 add 和 commit 之间的区别
  • 秘塔AI搜索的深度研究推出:它的“免费午餐”还能走多远?
  • NULL值处理:索引优化与业务设计实践指南
  • GIT版本回退
  • 堆排序算法详解:原理、实现与C语言代码
  • ubuntu--自启动程序
  • Docker Compose 清理指南:`down` 与 `down -v` 的核心区别与使用场景
  • Jenkins credentials 增加了github credential 但是在Git SCM 凭证中不显示