vue3.0 defineComponent、resolvComponent等

矫情吗；* 2021-07-24 12:28 651阅读 0赞

1、defineComponent
    	从实现上看:defineComponent只返回传递给它的对象
    	就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。
    	
    	export default defineComponent({
    		...
    	})
    	
    2、defineAsyncComponent
    	创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数
    		const AsyncComp = defineAsyncComponent(
    		  () =>
    		    new Promise((resolve, reject) => {
    		      resolve({
    		        template: '<div>I am async!</div>'
    		      })
    		    })
    		)
    
    	方式一:
    		当使用局部注册时,也可以直接提供一个返回Promise的函数：
    		  components: {
    		    AsyncComponent: defineAsyncComponent(() =>
    		      import('./components/AsyncComponent.vue')
    		    )
    		  }
        方式二:
    		const AsyncComp = defineAsyncComponent({
    			loader: () => import('./Foo.vue')	工厂函数
    			
    			loadingComponent: LoadingComponent,	加载异步组件时要使用的组件
    			
    			errorComponent: ErrorComponent,	    加载失败时要使用的组件
    			
    			delay: 200,							在显示loadingComponent之前的延迟 | 默认值:200ms
    			
    			timeout: 3000,						加载组件的时间超过了设定值,将显示错误组件,Infinity即永不超时
    			
    			suspensible: false,					定义组件是否可挂起 | 默认值：true
    			
    			onError(error, retry, fail, attempts) {
    				error:错误信息对象
    				retry:一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试
    				fail:一个函数，指示加载程序结束退出
    				attempts:允许的最大重试次数
    				
    				if (error.message.match(/fetch/) && attempts <= 3) {
    					retry()	请求发生错误时重试，最多可尝试 3 次
    				} else {
    					fail()
    				}
    				retry/fail就像promise的resolve/reject一样,必须调用其中一个才能继续错误处理。
    			}
    		})
      
    	
    3、resolveComponent
    	如果在当前应用实例中可用,则允许按名称解析component返回一个Component,否则返回接收的参数name
    	只能在render或setup函数中使用。
    	
    		const app = Vue.createApp({})
    		app.component('MyComponent', {
    		  ...
    		})
    		
    		import { resolveComponent } from 'vue'
    		render() {
    		  const MyComponent = resolveComponent('MyComponent')
    		}
    
    4、resolveDynamicComponent
    	返回已解析的Component或新创建的VNode,其中组件名称作为节点标签,如果找不到Component,将发出警告。
    	只能在render或setup函数中使用。
    	
    	resolveDynamicComponent(String|Object(组件的选项对象))
    	
    	import { resolveDynamicComponent } from 'vue'
    	render () {
    	  const MyComponent = resolveDynamicComponent('MyComponent') 
    	}