Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-fuvdpg?file=src/views/SlotScopes/index.vue

Steps to reproduce

Just open the reproduction above, no need to do anything.

What is expected?

There are two User component instances should been rendered I guess.

What is actually happening?

I'm learning to use slotscopes feature in this demo . I've created two User components here, and props to user the Lorem api filter, then get the data from api, and render some fields by the slotscope feature, but, there is only one rendered. and comes with a vue warning in console, which seems said it might be innner bugs.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 3.22 GB / 15.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 103.0.2
  npmPackages:
    vue: ^3.2.37 => 3.2.37

Any additional comments?

No response

It seems is actually usage problem, there is no initial value cause errors and stack the render.

may should use it with :

1. defineAsyncComponent to create a async component.
2. or use v-if before fetched data from api.
3. or define a set of initial value
4. or do not use Destructuring, cause duaring destructuring, it will try to access the fields that have not yet get.

出现这个错误是有使用层面的错误，原因是, 尝试在未获取到数据的阶段去 渲染组件， 导致报错 阻塞页面逻辑往下执行。 可以通过以下方式去解决该问题：

1. 使用异步组件
2. 使用 v-if 控制组件何时渲染， 在 fetch 成功到数据以后
3. 设定一组初始值
4. 不要使用解构语法，并在插值的时候用三元表达式判断油脂再渲染， 因为解构的时候，会尝试访问数据值， 而这些数据，有可能还没有，所以会报错阻塞执行。