Incompatiblechangesforcomponentsinvue3单文件组件(SFC)中移除了functional属性functional属性{functional:true}选项在functions创建的组件中被移除除了//使用组件,它负责提供适当的标题(即:h1、h2、h3等),在2.x中,这可以写成单个文件组件://Vue2函数导出默认{functional:true,props:['level'],render(h,{props,data,children}){returnh(`h${props.level}`,data,children)}}//Vue2功能组件示例使用现在在Vue3中,所有功能组件都使用正常功能创建,换句话说,不需要定义{functional:true}组件选项。他们将收到两个参数:props和context。context参数是一个包含组件的attrs、slots和emit属性的对象。此外,现在h是全局导入的,而不是在渲染函数中隐式提供h。使用前面提到的组件示例,它现在是这样的。//vue3.0import{h}from'vue'constDynamicHeading=(props,context)=>{returnh(`h${props.level}`,context.attrs,context.slots)}DynamicHeading.props=['level']exportdefaultDynamicHeading//vue3.0单文件写法主要区别是functional属性去掉了中的监听器,现在作为$attrs的一部分传递,可以在与异步组件一样defineAsyncComponent方法现在使用defineAsyncComponent辅助方法,用于定义重命名为loader的异步组件组件选项。Loader函数本身不再接受resolve和reject参数,必须返回一个Promise//vue2.定义为函数返回PromisecreateconstasyncPage=()=>import('./NextPage.vue')//或createconstasyncPage={component:()=>import('./NextPage.vue')inoptions'),delay:200,timeout:3000,error:ErrorComponent,loading:LoadingComponent}//vue3.x在vue3.x中需要使用defineAsyncComponent定义import{defineAsyncComponent}from'vue'importErrorComponentfrom'./components/ErrorComponent.vue'importLoadingComponentfrom'./components/LoadingComponent.vue'//没有选项的定义方法constasyncPage=defineAsyncComponent(()=>import('./NextPage.vue'))//带有选项的异步组件constasyncPageWithOptions=defineAsyncCopmonent({loader:()=>import('./NextPage.vue'),delay:200,timeout:3000,errorComponent:ErrorComponent,LoadingComponent:LoadingComponent})loaderfunctiondoesnotthenreceiveresolve和reject参数,并且必须始终返回Promise//vue2.xconstoldAsyncComponent=(resolve,reject)=>{}//vue3.xconstasyncComponent=defineAsyncComponent(()=>newPromise((resolve,reject)=>{}))需要在emits选项中声明组件事件。Vue3现在提供了一个emits选项,类似于props选项。此选项可用于定义组件向其父对象发出的事件