Vue.js：如何让data属性响应props变化并设置默认值？

我来帮你搞定props的person和data里offer.person的同步问题～你之前用watch或computed没生效，大概率是没处理好初始值触发或者监听逻辑，下面给你两种可靠的实现方案：

方案一：带Immediate选项的Watch监听器 #

这是最直接的方式，既处理组件初始化时的初始值同步，也能监听后续props的变化：

export default {
  props: ['person', 'type'],
  data() {
    return {
      offer: {
        type: 'basic',
        person: 'nurse', // 先设默认值，后续会被watch覆盖
        // ...其他属性
      }
    };
  },
  watch: {
    // 监听props的person属性
    person: {
      immediate: true, // 关键！组件挂载时立即执行一次handler
      handler(newPersonVal) {
        // 若props的person不为空则用它，否则用默认值'nurse'
        this.offer.person = newPersonVal || 'nurse';
      }
    }
  }
};

为什么之前的Watch没生效？ #

很大可能是你没加immediate: true，Vue的watch默认不会在组件初始化时触发，只会监听后续的属性变化，导致初始的props值没同步到offer.person里。

方案二：带Getter/Setter的Computed计算属性 #

如果想用computed实现，需要给计算属性设置getter和setter，同时确保初始化时同步值：

export default {
  props: ['person', 'type'],
  data() {
    return {
      offer: {
        type: 'basic',
        // 这里可以不设初始值，或者设默认值
        // ...其他属性
      }
    };
  },
  computed: {
    syncOfferPerson: {
      get() {
        // 获取值时优先用props的person，否则用默认值
        return this.person || 'nurse';
      },
      set(newVal) {
        // 当值变化时同步到offer.person
        this.offer.person = newVal;
      }
    }
  },
  mounted() {
    // 初始化时同步一次
    this.syncOfferPerson = this.syncOfferPerson;
  }
};

额外注意事项 #

• 确保父组件传递的person是响应式变化的：如果父组件是直接替换person的值（比如this.person = 'physician'），watch能正常监听；如果是修改嵌套对象的属性，可能需要用深度监听，但你的场景里person应该是字符串，所以没问题。
• 不要直接修改props：Vue里props是单向数据流，所有对person的修改应该在父组件中进行，子组件只负责监听同步到自己的data里。

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