您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Vue3非兼容变更——函数式组件

时间:2021-05-14 13:45:47  来源:  作者:好记性烂笔头

在Vue2.X中,函数式组件有两个主要应用场景:作为性能优化,因为它们的初始化速度比有状态组件快得多;返回多个根节点。

然而在Vue3.X中,有状态组件的性能已经提高到可以忽略不计的程度。此外,有状态组件现在还包括返回多个根节点的能力。

因此,函数式组件剩下的唯一应用场景就是简单组件,比如创建动态标题的组件。否则,建议你像平常一样使用有状态组件。

2.x语法:

使用<dynamic-heading>组件,负责提供适当的标题,例如H1,H2

,H3等等,在2.X中,这可能是作为单个文件组件编写的:

// Vue 2 函数式组件示例
export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children)
  }
}

或者,对于喜欢在单个文件组件中使用<template>的用户:

<!-- Vue 2 函数式组件示例使用 <template> -->
<template functional>
  <component
    :is="`h${props.level}`"
    v-bind="attrs"
    v-on="listeners"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

3.X语法:

通过函数创建组件

现在在Vue3中,所有函数式组件都是普通函数创建的,换句话说,不需要定义{functional: true}组件选项。

它们将接收两个参数:props和context。

context:是一个对象,包含组件attrs,slots和emit property。

此外,现在不是在render函数中隐式提供h,而是全局导入h。

前面提到的组件实例,现在改为:

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']

export default DynamicHeading

单文件组件 SFC

在3.x中,有状态组件和函数式组件之间的性能差异已经大大减少,并且在大多数用例中是微不足道的。因此,在SFC上使用functional的开发人员的迁移路径是删除改attrbute,并将props的所有引用重命名为$props,将attrs重命名为$attrs。

使用之前的实例,下面是现在这个样子:

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

主要的区别就在于:

1. functional attribute 在<template>中移除

2.listeners现在作为$attrs的一部分传递,可以将其删除



Tags:Vue3   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: Vue3  点击:(15)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: Vue3  点击:(72)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  Tags: Vue3  点击:(203)  评论:(0)  加入收藏
介绍viewer.js是一个专门用于图片预览的js库,图片预览效果很好,支持诸如缩放(支持滚轮操作)、旋转、播放、左右翻转、最大化等诸多使用功能,v-viewer则是对其进一步封装,将它带入...【详细内容】
2021-06-25  Tags: Vue3  点击:(444)  评论:(0)  加入收藏
在Vue2.X中,函数式组件有两个主要应用场景:作为性能优化,因为它们的初始化速度比有状态组件快得多;返回多个根节点。然而在Vue3.X中,有状态组件的性能已经提高到可以忽略不计的程...【详细内容】
2021-05-14  Tags: Vue3  点击:(230)  评论:(0)  加入收藏
目前electron最新稳定版本为v11.2.1,star高达89.2K+。# 官网地址https://www.electronjs.org/# 仓库地址https://github.com/electron/electron有数千个超优秀的软件是基于E...【详细内容】
2021-02-08  Tags: Vue3  点击:(1228)  评论:(0)  加入收藏
Vue3.0推出已有一段时间了,各位小伙伴们都有安排上学习没,想要技术进阶的同学赶紧学习起来吧。 如果你对vue3不是特别了解,或者打算去学习,可以看看下面的分享,希望对大家有所帮...【详细内容】
2020-10-19  Tags: Vue3  点击:(191)  评论:(0)  加入收藏
作者:Mingle转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ前言背景:2019年2月6号,React 发布 「16.8.0」 版本,vue紧随其后,发布了「vue3.0 RFC」Vue3.0受React16...【详细内容】
2020-08-06  Tags: Vue3  点击:(81)  评论:(0)  加入收藏
vue3.0中把响应式改成了proxy替代了以前的Object.defineProperty的形式;vue3.0的包目录截图; 其中:compiler-core:编译器核心compiler-dom:针对浏览器的编译模块compiler-ssr:针对...【详细内容】
2020-07-05  Tags: Vue3  点击:(114)  评论:(0)  加入收藏
导 读vue3.0中,响应式数据部分弃用了Object.defineProperty,使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用Object.defineProperty。1. Object.define...【详细内容】
2020-06-21  Tags: Vue3  点击:(19)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条