Vue3 关于子组件修改父组件属性的疑惑

我们知道，子组件通过 prop 接收父组件的传值，而且子组件也是禁止直接通过 prop 修改父组件的值。

但在 Vue3 中，这个限制似乎被 toRef 打破了。

假设父组件传下面的对象给子组件

{
  list: []
}

在 Vue3 的子组件里，如果通过下面的代码修改，会警告

export default defineComponent({
  props: {
    params: Object
  },
  setup(props) {
    props.params.list.push(1) // 会警告，但依然能生效
  }
})

但通过下面的方法修改，就能消除警告

export default defineComponent({
  props: {
    params: Object
  },
  setup(props) {
    const list = toRef(props.params, 'list')
    list.push(1) // 没有警告了，依然生效
  }
})

Vue3 关于子组件修改父组件属性的疑惑

推荐阅读