很多使用Vue3的朋友都遇到过一个问题：在setup()函数里直接解构props，数据就不再响应了。这是为什么呢？

问题重现

假设我们有一个组件，它接收一个user属性。在setup()里我们可能会这样写：

export default {
  props: ['user'],
  setup(props) {
    const { name } = props.user
    return { name }
  }
}

这样写看起来没问题，但实际上，name已经失去了响应性。父组件更新user时，这里的name不会跟着变。

原因：理解Vue3的响应式原理

要明白原因，得先知道Vue3的响应式原理。Vue3用Proxy来追踪数据变化。props本身是响应式的，但当你解构出props.user.name时，你拿到的是一个普通的值。这个值和原来的响应式数据断开了联系。

一个比喻

就像你有一根水管，水在水管里流动。你把水接出来放到杯子里，水还在杯子里。但水管里再流动的水，就和杯子里的水没关系了。

Vue3的响应式系统也是这样工作的。它只能追踪那些被reactive或ref包裹的数据。直接解构出来的值，只是一个普通的JavaScript值，系统不知道这个值需要被追踪。

正确的做法是什么？

方法一：避免提前解构

不要提前解构，在模板里直接使用props.user.name，这样就能保持响应性。

<template>
  <div>{{ props.user.name }}</div>
</template>

<script setup>
const props = defineProps(['user'])
</script>

方法二：使用toRefs

import { toRefs } from 'vue'

export default {
  props: ['user'],
  setup(props) {
    const { user } = toRefs(props)
    const name = user.value.name
    return { name }
  }
}

toRefs会把响应式对象的每个属性都转成ref。这样解构出来的属性还是响应式的。

注意细节：toRefs处理的是props本身，不是props.user。因为props才是响应式对象，props.user可能只是一个普通对象。

如果你需要解构props.user里的属性，可以这样写：

import { toRefs, reactive } from 'vue'

export default {
  props: ['user'],
  setup(props) {
    const user = reactive({ ...props.user })
    const { name } = toRefs(user)
    return { name }
  }
}

先用reactive包裹，再用toRefs解构，这样name就是响应式的了。

特殊情况：将props值传递给函数

还有一种情况要注意。有些时候，你解构props是为了传值给其他函数，比如：

setup(props) {
  const { id } = props
  fetchData(id)
}

这样写，id变化时，fetchData不会重新执行，因为这里的id只是一个普通值。

正确的写法是用watch或watchEffect：

import { watch } from 'vue'

setup(props) {
  watch(
    () => props.id,
    (newId) => {
      fetchData(newId)
    }
  )
}

或者使用watchEffect：

import { watchEffect } from 'vue'

setup(props) {
  watchEffect(() => {
    fetchData(props.id)
  })
}

这样，props.id变化时，fetchData就会用新的id重新执行。

使用script setup时的注意事项

如果你使用的是<script setup>语法糖，情况会稍有不同：

<script setup>
const props = defineProps(['user'])

// ❌ 错误：解构会丢失响应性
const { name } = props.user

// ✅ 正确：直接使用props
// 在模板中直接使用 props.user.name

// ✅ 正确：使用toRefs
const { user } = toRefs(props)
const name = computed(() => user.value.name)
</script>

总结

直接解构props会丢失响应性，因为解构出来的是普通值。要保持响应性，可以：

• 在模板里直接使用props.xxx

• 用toRefs处理后再解构

• 需要响应式地使用props值时，记得用watch或watchEffect

记住这个核心原则：只有通过响应式API（ref、reactive、toRefs等）包裹的数据，Vue的响应式系统才能追踪到它们的变化。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13557