遇到这样一个问题,我有个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就可以了
方面 | ref | reactive |
---|
响应式包裹对象 | 可以包裹任意类型,访问要用 .value | 只能包裹对象或数组,不用 .value |
访问数据 | 需要 .value | 直接访问 |
包裹基本类型 | 设计来包裹基本类型 | 不支持基本类型(只能对象) |
嵌套响应式 | 自动解包,模板中直接用 .value | 对嵌套属性自动响应 |
适用场景 | 单个值,简单变量 | 复杂对象,状态管理 |
直接解构的风险 | 解构会丢失响应式(需用 toRefs ) | 直接解构不会丢失响应式 |
你的场景如何选?
- 如果你需要一个整体响应式对象,建议用 reactive,它天然支持对象的嵌套和变化追踪
- 如果是单个简单变量,或者需要引用包装(比如 ref),用 ref