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

vue3 uniapp 使用ref更新值后子组件没有更新 ref reactive的区别?使用from from -item执行表单验证一直提示没有值

遇到这样一个问题,我有个1个页面A,一个from表单组件,一个form-item组件,

  • 使用是这样的,我在父组件A中使用 ,执行表单验证一直提示没有值
    ···

咱们先来讲一讲ref 和reactive的区别

ref

  • 用来创建一个基本类型或单一值的响应式引用。
  • 包装一个值,返回一个对象,这个对象有一个 .value 属性,存放真实的值。
  • 对基本类型(字符串、数字、布尔等)特别有用。
  • 也可以包裹对象,但需要访问时用 .value。
import { ref } from 'vue'const count = ref(0)
console.log(count.value) // 0count.value++

reactive

  • 用来创建一个响应式对象(通常是复杂数据,如对象、数组)。
  • 直接将普通对象变成响应式,不需要访问 .value。
  • 不能用来包装基本类型(会报错或者行为异常)。
import { reactive } from 'vue'const state = reactive({count: 0,name: 'Tom'
})console.log(state.count) // 0state.count++

上方组件未更新的情况,后面切换成reactive就可以了

方面refreactive
响应式包裹对象可以包裹任意类型,访问要用 .value只能包裹对象或数组,不用 .value
访问数据需要 .value直接访问
包裹基本类型设计来包裹基本类型不支持基本类型(只能对象)
嵌套响应式自动解包,模板中直接用 .value对嵌套属性自动响应
适用场景单个值,简单变量复杂对象,状态管理
直接解构的风险解构会丢失响应式(需用 toRefs直接解构不会丢失响应式

你的场景如何选?

  • 如果你需要一个整体响应式对象,建议用 reactive,它天然支持对象的嵌套和变化追踪
  • 如果是单个简单变量,或者需要引用包装(比如 ref),用 ref
http://www.dtcms.com/a/272006.html

相关文章:

  • 软考(软件设计师)计算机网络-物理层,数据链路层
  • QT - Qvector用法
  • Java设计模式之行为型模式(观察者模式)介绍与说明
  • 关于k8s Kubernetes的10个面试题
  • 【AXI】读重排序深度
  • Scala实现网页数据采集示例
  • linux的用户和权限(学习笔记
  • 西门子200SMART如何无线联三菱FX3U?御控工业网关实现多站点PLC无线通讯集中控制!
  • MiniGPT4源码拆解——models
  • 膨胀卷积介绍
  • QPC框架中状态机的设计优势和特殊之处
  • 大模型在膀胱癌诊疗全流程预测及应用研究报告
  • 【Linux基础命令使用】VIM编辑器的使用
  • 【个人笔记】负载均衡
  • Linux小白学习基础内容
  • LUMP+NFS架构的Discuz论坛部署
  • 可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
  • Spring Boot 3.4 :@Fallback 注解 - 让微服务容错更简单
  • 分桶表的介绍和作用
  • OpenSearch 视频 RAG 实践
  • GO 启动 简单服务
  • 【YOLO脚本】yolo格式数据集删除缺失删除图片和标签
  • 青岛门卫事件后:高温晕厥救援技术突破
  • 文件系统----底层架构
  • 如何处理mocking is already registered in the current thread
  • IDEA 安装AI代码助手GitHub Copilot和简单使用体验
  • Apache http 强制 https
  • 百度文心ERNIE4.5部署与性能白皮书:FastDeploy加速方案+全系列模型实测数据对比
  • DVWA靶场通关笔记-弱会话IDs(Weak Session IDs Medium级别)
  • mmu 是什么?core和die是什么?