Detailed explanation of incompatible changes in rendering functions in Vue3

// 2.0 rendering function export default {
 render(h) {
  return h('div')
 }
}

// 3.x syntax export default {
 render() {
  return h('div')
 }
}

// 2.x
export default {
 render(h) {
  return h('div')
 }
}

// 3.x
import { h, reactive } from 'vue'
export default {
 setup(prop, {slots, attrs, emit}) {
  const state = reactive({
   count: 0
  })
  function increment() {
   state.count++
  }
  // Return to render function return () => h(
   'div',
   {
    onClick: increment
   },
   state.count
  )
 }
}

// 2.x
{
 class: ['button', 'is-outlined'],
 style: {color: '#fffff'},
 attr: {id: 'submit'},
 domProps: {innerHTML: ''},
 on: {click: submitForm},
 key: 'submit-button'
}
// 3.x VNode structure is flat {
 class: ['button', 'is-outlined'],
 style: { color: '#34495E' },
 id: 'submit',
 innerHTML: '',
 onClick: submitForm,
 key: 'submit-button'
}

// 2.x
h(LayoutComponent, [
 h('div', {slot: 'header'}, this.header),
 h('div', {slot: 'header'}, this.header)
])
// Scope slot:


// 3.x
h(LayoutComponent, {}, {
 header: () => h('div', this.header),
 content: () => h('div', this.content)
})
// When you need to introduce scoped slots programmatically, they are now unified in the $slots option // 2.x scoped slots
this.$scopedSlots.header
// 3.x writing this.$slots.header

<template>
<label>
 <input type="text" v-bind="$attrs" v-on="$listeners">
</label>
</template>
<script>
 export default {
  inheritAttrs: false
 }
</script>

<template>
 <label>
  <input type="text" v-bind="$attrs" />
 </label>
</template>
<script>
export default {
 inheritAttrs: false
}
// If this component receives an id attribute and a v-on:close listener, the $attrs object will now look like this {
 id: 'my-input',
 onClose: () => console.log('close Event Triggered')
}
</script>

<template>
 <label>
  <input type="text" v-bind="$attrs" />
 </label>
</template>
<script>
export default {
 inheritAttrs: false
}
</script>
<!-- Write -->
<my-component id="my-id" class="my-class"></my-component>
<!-- vue2 will generate -->
<label class="my-class">
 <input type="text" id="my-id" />
</label>
<!-- vue3 will generate -->
<label>
 <input type="text" id="my-id" class="my-class" />
</label>