vue3.0 Suspense悬挂异步组件、定义异步组件

约定不等于承诺〃 2021-07-24 22:50 580阅读 0赞

1、导入异步组件
    	方式一:
    		若组件setup返回的是一个Promise对象,则该组件默认为异步组件,导入时使用defineAsyncComponent异步导入/import同步导入都行
    
    	方式二:
    		手动定义异步组件并导入
    		方式一:
    			const Hel=defineAsyncComponent(()=> import('./components/HelloWorld.vue'))
    			在components中配置
    	    方式二:
    	    	比如setup中返回一个Promise,则表明该组件就是一个异步组件
    			  setup(){
    			    return new Promise((resolve,reject)=>{
    			      setTimeout(()=>{
    			        resolve({
    			          msg:'异步'
    			        })
    			      },2000)
    			    })
    			  }
    
    2、使用Suspense悬挂,当异步组件加载完成时,将展示设置的同步内容
    	 <Suspense>
    	 
          <template v-slot:default>
            <异步组件 />  
          </template>
          
          <template v-slot:fallback>
    		...同步展示内容
          </template>
          
        </Suspense>

代码示例:  
异步组件:

<template>
      
      <div>{ { msg}}</div>
      
    </template>
    
    <script lang="ts">
    import {  defineComponent } from 'vue';
    
    export default defineComponent({   //定义一个组件
      name: 'AsyncHelloWorld',
      props: {  //传递参数,可以添加类型约束
        msg: String,
      },
      setup(){ 
        return new Promise((resolve,reject)=>{ 
          setTimeout(()=>{ 
            resolve({ 
              msg:'异步'
            })
          },2000)
        })
      }
    });
    </script>

悬挂使用:

<template>
      <div id="nav">
    
        <Suspense>
          <template v-slot:default>
              
            <Hel />  
          </template>
          <template v-slot:fallback>
            <div>
              loading
            </div>
          </template>
          
        </Suspense>
    
      </div>
      
    </template>
    
    <script lang='ts'>
    // ,ref, reactive
    import { defineComponent,ref,reactive,onMounted,watch,shallowRef,shallowReadonly,defineAsyncComponent} from 'vue';
    // import Hel from './components/HelloWorld.vue';
    const Hel=defineAsyncComponent(()=> import('./components/HelloWorld.vue'));
    
    export default defineComponent({ 
      name:"App",
      components:{ 
        Hel,
      }
    })
    
    </script>