Detailed explanation of incompatible changes of components in vue3

// Use the <dynamic-heading> component, which is responsible for providing the appropriate heading (ie: h1, h2, h3, etc.). In 2.x, this would probably be written as a single file component:
// Vue 2 functional component example export default {
 functional: true,
 props: ['level'],
 render(h, { props, data, children }) {
 return h(`h${props.level}`, data, children)
 }
}

// Vue 2 functional component example using <template>
<template functional>
 <component
 :is="`h${props.level}`"
 v-bind="attrs"
 v-on="listeners"
 />
</template>

<script>
export default {
 props: ['level']
}
</script>

//vue3.0
import { h } from 'vue'
const DynamicHeading = (props, context) => {
 return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
// Vue3.0 single file writing <template>
 <component
 v-bind:is="`h${$props.level}`"
 v-bind="$attrs"
 />
</template>

<script>
export default {
 props: ['level']
}
</script>

functional attribute to remove listeners in <template> is now passed as part of $attrs and can be removed

// vue2.x
// Previously asynchronous components were created by defining the component as a function that returns a Promise const asyncPage = () => import('./NextPage.vue')
// Or create it as an option const asyncPage = {
 component: () => import('./NextPage.vue'),
 delay: 200,
 timeout: 3000,
 error: ErrorComponent,
 loading: LoadingComponent
}

// vue3.x
In vue3.x, you need to use defineAsyncComponent to define import{ defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Definition method without options const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

// Async component with options constasyncPageWithOptions = defineAsyncCopmonent({
 loader: () => import('./NextPage.vue'),
 delay: 200,
 timeout: 3000,
 errorComponent: ErrorComponent,
 LoadingComponent: LoadingComponent
})

// vue2.x
const oldAsyncComponent = (resolve, reject) => {}
// vue3.x
const asyncComponent = defineAsyncComponent(() => new Promise((resolve, reject) => {}))

<!-- vue2.x -->
<template>
 <div>
 <p>{{ text }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</template>
<script>
 export default {
 props: ['text']
 }
</script>

<!-- vue3.x -->
<!-- Now, similar to props, emits can be used to define events emitted by components-->
<!-- This option also receives a given object, which is used to validate the passed parameters like props-->
<!-- It is strongly recommended to record all emits from each component, because without the .native modifier, all listeners for events not declared using will be included in the component's $attr, which by default will be bound to the component's root node -->
<template>
 <div>
 <p>{{ text }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</template>
<script>
 export default {
 props: ['text'],
 emits: ['accepted']
 }
</script>