• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

渲染函数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>

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
原生js canvas实现简单贪吃蛇发布时间:2022-02-05
下一篇:
详解vue的hash跳转原理发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap