vue3.0 defineComponent、resolvComponent等

1、defineComponent
	从实现上看:defineComponent只返回传递给它的对象
	就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。
	
	export default defineComponent({
	  data() {
	    return { count: 1 }
	  },
	  methods: {
	  }
		...
	 })
	 或者返回一个setup函数，函数名即为组件名
	 defineComponent(function HelloWorld() {
	  const count = ref(0)
	  return { count }
	})
	
2、defineAsyncComponent
	创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数
		const AsyncComp = defineAsyncComponent(
		  () =>
		    new Promise((resolve, reject) => {
		      resolve回调应该在服务端返回组件定义后被调用
		      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') 
	}

5、defineCustomElement
	该方法接受和defineComponent相同的参数,但是返回一个原生的自定义元素,该元素可以用于任意框架或不基于框架使用。

6、resolveDirective
	能在 render 或 setup 函数中使用
	
	const app = createApp({})
	app.directive('highlight', {})

	import { resolveDirective } from 'vue'
	render () {
	  const highlightDirective = resolveDirective('highlight')
	}