Vue3选项式API下子组件无法正确识别prop数据的解决方案

报错和方案失效不是什么prop加载时序玄学问题，是几个明确的写法错误：

• 父组件传递的itemInfo大概率初始值为undefined（比如异步请求数据未返回时未给初始值），子组件首次渲染读取属性时直接命中空值
• 之前写的watch回调参数顺序写反：watch回调第一个参数是新值，第二个才是旧值，之前写的itemData(oldVal, newVal)会导致赋值时拿到的是旧的undefined
• watch未配置immediate: true，组件初始化阶段不会触发回调，首次渲染时本地变量还未被赋值
• 直接将prop对象赋值给本地data变量属于引用赋值，修改本地变量属性本质还是在修改prop，违反Vue单向数据流规则，父组件重渲染时本地值会被强制覆盖
• prop未配置默认兜底值，首次渲染拿不到父组件传值时没有 fallback 结构

方案1：修正本地副本+watch的写法（适合需要在子组件内部做临时状态修改、最后统一提交的场景） #

1. 父组件先给传递的itemInfo配置初始结构，不要初始为undefined：

// 父组件data
data() {
  return {
    itemInfo: {
      isCustomizable: 0,
      // 补全该对象所有用到的属性初始值
    }
  }
}

2. 子组件prop配置默认值，修正watch写法，拷贝prop值避免引用污染：

<template>
  <input type="checkbox" v-model="localItem.isCustomizable">
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      // 配置和父组件一致的默认结构兜底
      default: () => ({
        isCustomizable: 0
      })
    }
  },
  data() {
    return {
      localItem: {}
    }
  },
  watch: {
    itemData: {
      handler(newVal) {
        // 浅拷贝避免直接引用prop，有嵌套对象就换structuredClone(newVal)做深拷贝
        this.localItem = { ...newVal }
      },
      immediate: true, // 初始化立刻执行赋值
      deep: true // 对象存在嵌套属性时开启
    }
  },
  // 后续需要提交数据时，直接取this.localItem处理即可
}
</script>

方案2：遵循单向数据流的标准写法（更推荐，无时序问题） #

不需要在子组件维护本地副本，子组件只负责触发更新事件，状态统一由父组件维护，从根源避免初始化报错和prop修改问题：

1. 子组件写法：

<template>
  <input 
    type="checkbox" 
    :checked="itemData.isCustomizable"
    @change="$emit('update:itemData', {
      ...itemData,
      isCustomizable: $event.target.checked ? 1 : 0
    })"
  >
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: () => ({ isCustomizable: 0 })
    }
  },
  emits: ['update:itemData']
}
</script>

2. 父组件使用时直接绑定同步：

<!-- Vue3 支持v-model绑定prop -->
<child-component v-model:itemData="itemInfo" />
<!-- 兼容选项式API的.sync写法也可以 -->
<child-component :itemData="itemInfo" @update:itemData="val => itemInfo = val" />

后续存数据库直接取父组件的itemInfo即可，不需要额外从子组件取值，状态完全同步不会出现不一致问题。

• 所有对象类型的prop必须配置返回完整结构的default函数，不要只声明类型
• 不要直接将prop对象/数组赋值给本地变量，必须做拷贝，避免引用共享导致的意外修改
• watch需要初始化执行时必须加immediate: true，不要默认它会在组件创建时跑
• 注意watch回调的参数顺序，第一个永远是变化后的新值

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