Vue.js异步数据加载：如何避免组件渲染时数据未加载导致的UI闪烁？

<code class="vue"><template>
  <el-select v-model="selectVal">
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: ['value'],
  emits: ['update:value'],
  data() {
    return {
      selectOptions: [],
    };
  },
  computed: {
    selectVal: {
      get() {
        return this.selectOptions.length ? this.value : undefined;
      },
      set(val) {
        this.$emit('update:value', val);
      }
    }
  },
  created() {
    this.getOptions();
  },
  methods: {
    async getOptions() {
      this.selectOptions = [];
      // 异步请求，例如：await axios.get('/api/options')
      this.selectOptions = [
        { value: 'Option1', label: 'Option1' },
        { value: 'Option2', label: 'Option2' },
      ];
    }
  }
};
</script>

<!-- 父组件示例 -->
<template>
  <myselect :value="selectedValue" @update:value="selectedValue = $event"/>
  <el-radio-group v-model="selectedValue">
    <!-- 单选按钮 -->
  </el-radio-group>
</template></code>