为何在Vue子组件中可直接修改props的count并更新视图？

你遇到的这个现象，核心和Vue3 <script setup> 里defineProps的实现以及响应式机制有关：

• defineProps返回的是响应式代理对象，不是原始props值的拷贝。你在模板里执行count++时，本质是在操作这个代理对象的属性。
• 对于count这类基础类型（数字、字符串、布尔值等）的props，直接修改会在子组件的响应式系统中生成一个本地同名响应式属性，这个本地属性会覆盖父组件传递的props值，进而触发子组件视图更新。但要注意：父组件里的原始count值不会被改动，这种操作已经打破了Vue的单向数据流规范。
• 这种写法其实是不被推荐的，Vue在开发模式下会在控制台抛出明确警告，提示你不应直接修改props。正确的做法是通过defineEmits定义事件，在子组件中触发事件通知父组件修改对应状态。

举个符合规范的写法示例：

<!-- 子组件 -->
<script setup>
const props = defineProps(['count'])
const emit = defineEmits(['update:count'])
</script>
<template>
  <p>Child</p>
  <p>props：{{ count }}</p>
  <button @click="emit('update:count', props.count + 1)">+</button>
  <button @click="emit('update:count', props.count - 1)">-</button>
</template>

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <Child :count="count" @update:count="count = $event" />
</template>

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