如何使用props值初始化数据而无需调用模板中的道具？

Question

我的props结构如此。

props: {
  propsChooseColor: {
    type: String,
    required: true
  }
}

props按预期收到（使用vue devtools检查）。

然后我尝试使用类似official suggestion的道具值初始化data。

chooseColor: this.propsChooseColor

问题是：

• 如果我在chooseColor中致电propsChooseColor和template，那么 chooseColor与道具具有相同的价值。 但如果我不打电话给propsChooseColor，则chooseColor值为""。

E.g chooseColor的值将为空。

<template>
  ...
  data color: {{ chooseColor }} // RETURN ""
  ...
</template>

E.g chooseColor的值与propsChooseColor相同。

<template>
  ...
  data color: {{ chooseColor }} // RETURN BLACK
  props color: {{ propsChooseColor }} // RETURN BLACK
  ...
</template>

我尝试调试它，发现如果beforeUpdate hook在模板中调用，则会调用props。

发生了什么事？如何在不调用道具的情况下初始化数据？接近使用计算属性可能不适合，因为我需要修改数据。

编辑。我也像这样在根组件 beforeRouteEnter 钩子中获取数据。

beforeRouteEnter (to, from, next) {
  const _id = to.query._id
  const size = to.query.size
  const color = to.query.color

  axios.get(`http://localhost:8081/api/product-details/${_id}`)
    .then(response => {
      next(vm => {
        vm.id = _id
        vm.chooseSize = size
        vm.chooseColor = color
        vm.product = JSON.parse(JSON.stringify(response.data))

        axios.get(`http://localhost:8081/api/product/all-seller/${vm.product.product_fullName}`)
          .then(response => {
            vm.productAllSeller = JSON.parse(JSON.stringify(response.data))
            vm.fetchdataComplete = true
        })
      })
    })
}