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

目录

• 渲染函数API变更
• Render函数参数 
• 渲染函数签名更改
• VNode Props 格式化
• slot统一
• 移除$listeners
• $attrs现在包括class和style

渲染函数API变更

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

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

Render函数参数 

// 2.0 渲染函数export default {
 render(h) {
  return h('div') }
}
// 3.x语法export default {
 render() {
  return h('div') }
}
    

渲染函数签名更改

// 2.xexport default {
 render(h) {
  return h('div') }
}
// 3.ximport {
 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.xh(Layoutcomponent, [ h('div', {
slot: 'header'}
, this.header), h('div', {
slot: 'header'}
, this.header)])// 作用域slot：// 3.xh(LayoutComponent, {
}
, {
     header: () =>
     h('div', this.header), content: () =>
 h('div', this.content)}
    )// 需要以编程方式引入作用域slot时，他们现在被统一在了$slots选项中// 2.x的作用域slotthis.$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>
    

以上就是详解vue3中渲染函数的非兼容变更的详细内容，更多关于vue 渲染函数非兼容变更的资料请关注其它相关文章！

• 详解vue渲染函数render的使用
• Vue渲染函数详解
• vue中正确使用jsx语法的姿势分享
• React-vscode使用jsx语法的问题及解决方法
• 使用JSX 建立组件 Parser（解析器）开发的示例
• 使用JSX实现Carousel轮播组件的方法(前端组件化)
• vue组件jsx语法的具体使用
• vue jsx 使用指南及vue.js 使用jsx语法的方法
• 详解Vue如何支持JSX语法
• 渲染函数 & JSX详情

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！