Vue3组件onLoad执行顺序问题：如何确保子组件获已初始化参数

针对你遇到的A组件key初始化晚于B组件onLoad执行的问题，给你几个实用的解决方案：

1. 条件渲染B组件 #

核心思路是等key有有效值后再渲染B组件，这样B的onLoad只会在key准备好之后触发，从根源避免undefined的情况。

• 小程序场景示例：

  <B wx:if="{{key}}" key="{{key}}" />
  

• React/Vue场景示例：

  {/* React */}
  {key && <B keyProp={key} />}
  

  <!-- Vue -->
  <B v-if="key" :key="key" />
  

2. 让B组件监听key的变化再触发请求 #

不用纠结onLoad的执行顺序，直接在B组件里监听传入的key参数，当key从undefined变为有效值时再发起请求：

• Vue 示例：

  export default {
    props: ['key'],
    watch: {
      key(newKey) {
        if (newKey) {
          this.requestServerData(newKey); // 原来放在onLoad里的请求逻辑
        }
      }
    }
  }
  

• React 示例：

  function B({ keyProp }) {
    useEffect(() => {
      if (keyProp) {
        requestServerData(keyProp);
      }
    }, [keyProp]); // 依赖keyProp变化触发
  }
  

• 小程序组件示例：

  Component({
    properties: {
      key: String
    },
    observers: {
      'key'(newKey) {
        if (newKey) {
          this.requestServerData(newKey);
        }
      }
    }
  })
  

3. 把key改成响应式状态（如果用了Vue/React） #

如果你的key是用非响应式的ref（比如React的useRef），改成响应式状态（React的useState、Vue的ref/reactive），这样当A组件给key赋值后，会触发重新渲染，传给B的key就是最新的有效值，配合上面的监听或条件渲染效果更稳定。

• React 示例：

  function A() {
    const [key, setKey] = useState(null); // 用useState替代useRef
    useEffect(() => {
      // 模拟异步获取key的逻辑
      const fetchedKey = 'xxx';
      setKey(fetchedKey);
    }, []);
  
    return <B keyProp={key} />;
  }
  

4. 提前A组件的key赋值时机 #

如果框架允许，把A组件中key的赋值逻辑从onLoad移到更早的生命周期钩子。比如小程序页面中，onLoad是页面加载完成后触发，但组件的attached可能在页面渲染时就执行了，你可以尝试把key的赋值放到onShow（注意做防抖或首次加载判断）；Vue中可以放到created钩子，确保在组件渲染前完成key的初始化。

优先推荐前两种方案，条件渲染最直接，监听变化则更灵活，能适配key后续可能更新的场景。

内容的提问来源于stack exchange，提问作者Ted Han Neversummer