Vue 3.3.0 alpha-4解构Props后仅引用类型保持响应式问题求助

问题原因 #

1. 单向数据流规则限制：Vue的Props是单向绑定的，子组件绝对不能直接修改Props的值，所有更新必须由父组件触发。
2. 解构后变量的本质差异：
   • 解构defineProps返回的对象时，dialog这类基础类型会被提取成常量原始值（失去了响应式代理的包装），所以直接执行dialog = false会触发"Assignment to constant variable"的语法错误。
   • field是引用类型（对象），解构后拿到的是原响应式对象的引用，你修改的是对象内部的name属性，并没有重新赋值field变量本身，所以不会触发常量赋值错误，但这种操作依然违反了单向数据流的设计原则，属于不规范用法。

解决方法 #

1. 官方推荐：通过emit通知父组件更新Props #

这是最符合Vue设计理念的方式，子组件只负责触发事件，由父组件来修改对应的状态：

<script setup lang="ts">
import { onMounted, nextTick } from 'vue'

const props = defineProps<{
  field: {name: string, value: string},
  dialog: boolean
}>()
// 定义要触发的更新事件
const emit = defineEmits<{
  (e: 'update:dialog', value: boolean): void
  (e: 'update:field', value: {name: string, value: string}): void
}>()

onMounted(() => {
  nextTick(async () => {
    // 通知父组件修改dialog状态
    emit('update:dialog', false)
    // 推荐通过整体替换的方式更新field，避免直接修改内部属性
    emit('update:field', {...props.field, name: "data"})
  })
})
</script>

父组件可以用v-model语法糖简化绑定：

<YourChildComponent v-model:dialog="parentDialog" v-model:field="parentField" />

2. 用toRefs保留响应式（仅用于读取场景） #

如果只是需要在子组件中读取响应式的Props值，不需要修改，可以用toRefs解构，这样解构后的变量依然是响应式的ref对象，但注意依然不能直接修改其value（会触发Vue的单向数据流警告）：

<script setup lang="ts">
import { toRefs, onMounted, nextTick } from 'vue'

const props = defineProps<{
  field: {name: string, value: string},
  dialog: boolean
}>()
const { field, dialog } = toRefs(props)

onMounted(() => {
  nextTick(async () => {
    console.log(dialog.value) // 正常读取响应式值
    // 以下操作不推荐，会触发Vue警告
    // dialog.value = false
    // field.value.name = "data"
  })
})
</script>

3. 使用本地响应式变量（独立状态场景） #

如果子组件需要维护和父组件Props无关的独立状态，可以把Props的初始值赋值给本地的ref变量，之后就可以自由修改了：

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'

const props = defineProps<{
  dialog: boolean
}>()
// 基于Props初始值创建本地响应式变量
const localDialog = ref(props.dialog)

onMounted(() => {
  nextTick(async () => {
    localDialog.value = false // 自由修改本地状态
  })
})
</script>

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