详解vue3中渲染函数的非兼容变更

渲染函数API变更

此更改不会影响到<template>用户

h现在全局导入，而非作为参数传递给渲染函数
渲染函数参数更改为在有状态组件和函数组件之间更加一致
vnode现在又一个扁平的prop结构

Render函数参数

				?

									// 2.0 渲染函数

									export default {

									 render(h) {

									  return h('div')

									 }

									}

									// 3.x语法

									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++

									  }

									  // 返回render函数

									  return () => h(

									   'div',

									   {

									    onClick: increment

									   },

									   state.count

									  )

									 }

									}

VNode Props 格式化

				?

									// 2.x

									{

									 class: ['button', 'is-outlined'],

									 style: {color: '#fffff'},

									 attr: {id: 'submit'},

									 domProps: {innerHTML: ''},

									 on: {click: submitForm},

									 key: 'submit-button'

									}

									// 3.x VNode的结构是扁平的

									{

									 class: ['button', 'is-outlined'],

									 style: { color: '#34495E' },

									 id: 'submit',

									 innerHTML: '',

									 onClick: submitForm,

									 key: 'submit-button'

									}

slot统一

更改了普通slot和作用域slot

this.$slots现在将slots作为函数公开
移除this.$scopedSlots

				?

									// 2.x

									h(LayoutComponent, [

									 h('div', {slot: 'header'}, this.header),

									 h('div', {slot: 'header'}, this.header)

									])

									// 作用域slot：

									// 3.x

									h(LayoutComponent, {}, {

									 header: () => h('div', this.header),

									 content: () => h('div', this.content)

									})

									// 需要以编程方式引入作用域slot时，他们现在被统一在了$slots选项中

									// 2.x的作用域slot

									this.$scopedSlots.header

									// 3.x的写法

									this.$slots.header

移除$listeners

$listeners对象在vue3中已经移除，现在事件监听器是$attrs的一部分

在vue2中，可以使用this.attrs和this.attrs和this.listeners分别访问传递给组件的attribute和时间监听器，结合inheritAttrs: false，开发者可以将这些attribute和监听器应用到其他元素，而不是根元素

				?

									<template>

									<label>

									 <input type="text" v-bind="$attrs" v-on="$listeners">

									</label>

									</template>

									<script>

									 export default {

									  inheritAttrs: false

									 }

									</script>

在vue的虚拟DOM中，事件监听器现在只是以on为前缀的attribute，这样就成了attrs对象的一部分，这样attrs对象的一部分，这样listeners就被移除了

				?

									<template>

									 <label>

									  <input type="text" v-bind="$attrs" />

									 </label>

									</template>

									<script>

									export default {

									 inheritAttrs: false

									}

									// 如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示

									{

									 id: 'my-input',

									 onClose: () => console.log('close Event Triggered')

									}

									</script>

$attrs现在包括class和style

现在的$attr包含所有的attribute，包括class和style

在2.x中，虚拟dom会对class和style进行特殊处理，所以他们不包括在$attr中
在使用inheritAttr: false的时候会产生副作用

$attrs 中的 attribute 不再自动添加到根元素中，而是由开发者决定在哪添加。
但是 class 和 style 不属于 $attrs，仍然会应用到组件的根元素：

				?

									<template>

									 <label>

									  <input type="text" v-bind="$attrs" />

									 </label>

									</template>

									<script>

									export default {

									 inheritAttrs: false

									}

									</script>

									<!-- 写入 -->

									<my-component id="my-id" class="my-class"></my-component>

									<!-- vue2 将生成 -->

									<label class="my-class">

									 <input type="text" id="my-id" />

									</label>

									<!-- vue3 将生成 -->

									<label>

									 <input type="text" id="my-id" class="my-class" />

									</label>