Vue：如何不调用模板内Props，用Props值初始化Data？

这个问题其实是Vue初始化阶段props与data赋值时机，加上模板依赖收集优化带来的小坑。你当前直接在data里用this.propsChooseColor初始化chooseColor的写法，会因为模板未引用propsChooseColor时，Vue的优化机制跳过了该props的部分响应式处理，导致data初始化拿不到正确的值。

下面给你两个可靠的解决办法：

方法1：在created钩子中初始化Data #

把赋值逻辑放到created生命周期钩子中，此时props已经完全就绪，不管模板是否引用propsChooseColor，都能正确拿到值：

props: {
  propsChooseColor: {
    type: String,
    required: true
  }
},
data() {
  return {
    chooseColor: '' // 先初始化空占位
  }
},
created() {
  // 此时props已完成传递，赋值更可靠
  this.chooseColor = this.propsChooseColor
}

方法2：添加Watch实现Props同步（可选） #

如果后续父组件可能更新propsChooseColor，希望chooseColor能自动同步变化的话，可搭配watch监听：

props: {
  propsChooseColor: {
    type: String,
    required: true
  }
},
data() {
  return {
    chooseColor: ''
  }
},
created() {
  this.chooseColor = this.propsChooseColor
},
watch: {
  propsChooseColor(newVal) {
    this.chooseColor = newVal
  }
}

额外提示 #

尽量避免在data函数中直接用this.xxx（尤其是props）初始化值，因为data函数执行时机较早，偶尔会遇到props未完全传递的情况；用生命周期钩子或watch来处理这类赋值，会更稳定可靠。

内容的提问来源于stack exchange，提问作者nfl-x