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

Posted 2021-09-25 月岛蘑菇

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.$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对象的一部分，这样$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>