Vue组件script内访问props出现空Proxy对象的问题求助

核心原因 #

你遇到的问题是子组件挂载（created钩子执行）时，父组件还没完成singleData的赋值，所以created里拿到的是初始的空Proxy对象；而模板是响应式的，当父组件后续更新singleData后，模板会自动重新渲染，因此v-for能正常显示数据。

解决方案 #

方案1：调整赋值与弹窗显示的顺序（推荐）

父组件中先给singleData赋值，再打开弹窗，确保子组件挂载时已经拿到完整数据：

methods: {
  editRow(branch_row) {
    this.singleData = branch_row // 先赋值
    this.editDialog = true       // 再打开弹窗
  },
}

方案2：子组件监听props变化

如果业务场景必须先打开弹窗再赋值，可以在子组件中通过watch监听singleData的变化，实时获取最新值：

props: ['singleData'],
watch: {
  // 监听singleData变化，数据更新时执行逻辑
  singleData(newVal) {
    // 过滤初始空对象的情况
    if (Object.keys(newVal).length) {
      console.log(newVal)
      // 这里写你需要执行的业务逻辑
    }
  },
  // 可选：添加immediate选项，组件挂载时也执行一次监听逻辑
  // singleData: {
  //   handler(newVal) {
  //     console.log(newVal)
  //   },
  //   immediate: true
  // }
}

方案3：父组件规范ref的赋值方式（可选）

父组件中setup返回的ref对象，在选项式的methods中虽然可以通过this.singleData直接赋值，但如果用纯组合式API写法，更规范的方式是在setup内定义方法：

export default {
  setup() {
    const singleData = ref({})
    const editDialog = ref(false)

    const editRow = (branch_row) => {
      singleData.value = branch_row
      editDialog.value = true
    }

    return {
      singleData,
      editDialog,
      editRow
    }
  }
}

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