Version

3.2.20

Reproduction link

codepen.io

Steps to reproduce

open codepen

What is expected?

先显示loading内容, 在delay时间超时后, 再显示about内容

First display the loading content, after the delay time expires, then display the about content

What is actually happening?

先空白, 然后显示about内容

Blank first, then show about content

我理解delay参数应该是作为组件的延迟加载时间, 但是看源码内部只有一个

if (delay) {
        setTimeout(() => {
          delayed.value = false
        }, delay)
      }

处理, 但delayed.value没有别的响应引用. 另外, 在判断loadingComponent的时候, delayed.value在有传值时应该为true, 导致不会创建加载中内容

else if (loadingComponent && !delayed.value) {
          return createVNode(loadingComponent as ConcreteComponent)
        }

I understand that the delay parameter should be the delayed loading time of the component, but there is only one in the source code

if (delay) {
        setTimeout(() => {
          delayed.value = false
        }, delay)
      }

and delayed.value has no other response references. In addition, when judging the loadingComponent, delayed.value should be true when there is a value passed, so that the loading content will not be created. (from google translate)

另外, 可以说下下面的这段分支会在什么情况下进入吗? 我没看出来.

if (thisRequest !== pendingRequest && pendingRequest) {
   return pendingRequest
}

Your understanding of delay seems incorrect. see https://v3.vuejs.org/api/global-api.html#defineasynccomponent edit your code as below, you will see the loadingComponent

const about = Vue.defineAsyncComponent({
-  delay: 10000, 
+  delay: 1000, 
  loader: () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          template: '<div class="about"> \
            <h1>This is an about page</h1> \
          </div> '
        });
      }, 2000)
    })
  },
  loadingComponent: {
    template: '<div class="about"> \
      <h1>This is an loading page</h1> \
    </div> '
  },
})

delay属性的意思是(loadingComponent)加载组件之前的延迟时间，而不是加载组件之后，当loader中的组件加载时间比delay的时间多时，是不会显示加载组件的，因为只有delay设置的时间过去之后才会显示加载组件。