Vue3组合式API中组件参数是ref还是reactive类型？

基础认知澄清 #

ref()与reactive()的核心逻辑都是为传入值创建Proxy响应式代理，二者都不会对原对象做浅拷贝或深拷贝，核心区别仅为：

• ref支持包裹任意类型值（基础类型、对象、数组均可），包裹对象类型时需通过.value访问根对象，直接操作.value下的属性可保留响应式
• reactive仅支持包裹对象/数组等引用类型，无需.value即可直接操作属性，但不可直接替换整个reactive对象，否则会丢失响应式

常见失效场景与解决方案 #

对象字段更新不触发UI更新，通常由以下几种场景导致，对应解决方案如下：

1. 父组件传递的参数本身非响应式 #

如果父组件传递给子组件的对象没有用ref或reactive包裹，本身就是普通JS对象，自然不会触发响应式更新。

• 解决方案：父层定义待传递对象时，必须用响应式API包裹，示例：

// 父组件写法示例
import { ref, reactive } from 'vue'
// 用ref包裹
const formData = ref({
  account: '',
  password: ''
})
// 或用reactive包裹
const formData = reactive({
  account: '',
  password: ''
})

2. 操作过程中丢失响应式引用 #

这类是最常见的失效原因，通常触发于以下操作：

• 直接解构reactive对象的属性，脱离了代理上下文
• 将ref.value赋值给临时变量后修改临时变量
• 直接给reactive对象整体赋值，替换了原代理对象
• 解决方案：
  • 解构reactive对象前先用toRefs包裹，保证解构出的属性仍为响应式：

  import { toRefs, reactive } from 'vue'
  const userInfo = reactive({ name: '张三', age: 20 })
  const { name, age } = toRefs(userInfo)
  // 修改name.value、age.value可正常触发更新
  

  • 操作ref包裹的对象时，始终通过.value访问修改，不要将.value赋值给临时变量后操作
  • 如果有整体替换对象的需求，优先使用ref包裹对象，直接修改.value即可：

  // 错误写法：reactive整体替换会丢失响应式
  let userInfo = reactive({ name: '张三' })
  userInfo = { name: '李四' }
  // 正确写法：用ref包裹后修改.value
  const userInfo = ref({ name: '张三' })
  userInfo.value = { name: '李四' }
  

3. 子组件直接修改Props属性 #

单向数据流规范下不推荐子组件直接修改Props，即使父层Props是响应式的，部分场景下也可能出现更新异常。

• 解决方案：子组件通过emit抛出事件通知父组件修改原响应式数据，保证数据流单向可控。

内容的提问来源于stack exchange，提问作者Tibi