Vue组合式API修改父组件props属性是否需要使用toRefs

首先明确核心结论 #

1. 两种写法本质都不符合Vue官方开发规范，不推荐在生产环境使用
2. 第一种写法不需要toRefs也能运行，和toRefs的作用场景直接相关

为什么不用toRefs也能生效 #

toRefs的核心作用是：将响应式对象（Vue的props本身是响应式代理对象）的属性拆解为独立的ref对象，保证拆解后的值依然和原属性保持响应式关联，通常用于需要解构props、且要在模板/计算属性/侦听器中依赖该属性响应式更新的场景。

而你当前的场景里，并没有需要响应式追踪children属性变化的需求：你只是临时读取一次p.props.children拿到数组的内存引用，调用splice修改的是这个引用指向的原数组内容，无论是否用toRefs包裹，最终操作的都是父组件存储的同一个数组对象，所以修改都能生效。

为什么说两种写法都不符合规范 #

Vue强制要求单向数据流：子组件不允许直接修改父组件传递的props，所有props的变更都应该由父组件自己完成。你现在直接跨组件修改父级props的内容，会带来几个隐形问题：

• 后续如果父组件传递的children是计算属性生成的新数组，你的修改不会作用到源数据，直接失效
• 数据流没有统一的修改入口，出问题很难排查，维护成本极高

正确的实现方式参考如下：

// 子组件逻辑
const emit = defineEmits(['delete'])
const remove = (id) => emit('delete', id)

// 父组件模板引入子组件
<Child @delete="handleDeleteChild" />

// 父组件逻辑
const handleDeleteChild = (deleteId) => {
  children.value = children.value.filter(item => item.id !== deleteId)
}

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