Vue如何将Object类型prop的属性值正确存入实例的data属性中

原来的写法失效主要有两个核心原因：

• 组件初始化执行data函数时，若父组件的myval是异步请求后才传递的，此时this.myval为undefined，访问theme属性会抛出错误，导致赋值失败
• 即使myval是同步传递的，data初始化仅执行一次，后续父组件更新myval.theme的值时，getTheValue不会自动同步更新

根据使用场景选择对应实现方式：

场景1：仅需要读取myval.theme值，无需在当前组件修改该值 #

优先使用计算属性，天然保持和prop的响应式同步，同时自动处理prop的异步更新场景：

props: {
  myval: {
    type: Object,
    // 建议给prop加默认值，避免空值报错
    default: () => ({})
  }
},
computed: {
  getTheValue() {
    // 可选链+空值合并，兼容myval为空的场景
    return this.myval?.theme ?? ''
  }
}

模板中直接用{{getTheValue}}即可，和原来使用data变量的写法完全一致。

场景2：需要把值存在data中，后续会在当前组件修改该值（不影响父组件prop） #

使用watch监听myval的变化，同步更新data值，同时开启immediate参数保证初始化时就执行赋值：

props: {
  myval: {
    type: Object,
    default: () => ({})
  }
},
data() {
  return {
    // 初始先给默认值
    getTheValue: ''
  }
},
watch: {
  myval: {
    handler(newMyval) {
      this.getTheValue = newMyval?.theme ?? ''
    },
    // 深度监听，myval内部属性变化也能触发
    deep: true,
    // 初始化时立即执行一次handler，不用额外在生命周期里赋值
    immediate: true
  }
}

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