Vue：如何在created生命周期函数中正确访问props传入的数组数据

问题根因 #

父组件的城市数据是通过getCities异步接口获取的，子组件created生命周期触发时，接口请求还未返回结果，父组件传给子组件的cityOptions还是初始化的空数组，所以此时直接打印options得到的是空值。
你打印完整this.$props时能看到填充后的数据，是浏览器控制台的特性：打印引用类型数据时存储的是引用指针，你手动点开控制台对象时，接口已经返回、数据已经更新，所以展示的是最新值，并非打印时刻的真实数据。

解决方法 #

方法1：父组件等待数据加载完成后再渲染子组件 #

在父组件调用子组件的标签上添加v-if判断，等cityOptions有值后再挂载子组件，这样子组件created触发时就可以直接拿到完整数据：

<!-- 父组件模板 -->
<SelectWithSearch 
  v-if="cityOptions.length" 
  :options="cityOptions" 
  :label="你的标签值"
/>

方法2：子组件监听options变化获取数据 #

如果子组件需要提前渲染，不能等待数据加载再挂载，可以在子组件内添加watch监听options的变化，拿到更新后的完整数据，可通过immediate配置项让监听回调在组件初始化时立即执行一次：

// 子组件script
export default {
  props: {
    label: { type: String, required: false },
    options: { type: Array, required: true },
  },
  watch: {
    options: {
      immediate: true,
      handler(newOptions) {
        // 此处newOptions即为最新的完整数组，你的业务逻辑写在这里
        console.log('完整options数据：', newOptions)
      }
    }
  }
}

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