专栏首页云前端[译]: Vue.js 函数式组件:what, why & when?

[译]: Vue.js 函数式组件:what, why & when?

原文:https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713

要义:如果你的组件不需要状态化,将其转换为一个 函数式组件(functional component) 可提高 70% 的渲染性能

What - 何为函数式组件?

functional component (别跟 Vue 的 render function 搞混) 是一个不持有状态也没有实例的组件。

说白了,这就意味着这种组件不支持反应式,并且不能用 this 关键字引用到自身。

基于模板的函数式组件

基于 render 函数的函数式组件

访问组件属性

你肯定会疑惑,离开了状态或实例,怎么引用诸如 data 或 methods 等东西。幸运的是,Vue 在 render() 中提供了一个 context 参数,该参数是一个有下列属性的对象:

  • props:提供所有 prop 的对象
  • children:VNode 子节点的数组
  • slots:一个函数,返回了包含所有插槽的对象
  • scopedSlots:(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  • parent:对父组件的引用
  • listeners:(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  • injections:(2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的 property。

访问这个 context 参数相当简单。举例来说,如果想获得属性,这样就可以:

在模板中访问上下文

在 render 函数中访问上下文

? 函数式组件和属性:

在一个函数式组件中,实际上你不用再显式声明一遍可接收的 props(译注:大于 2.3.0 版本)。然而,一旦你显式声明了 props,这些属性就将依此校验。我个人仍推崇这样做,这样就能指定其类型、required、默认值,或自定义校验器等。

Why - 函数式组件为何有趣?

函数式组件让对组件的访问有点麻烦了,也带来了一些复杂性,那还为什么要自找麻烦呢?

快!

因为函数式组件没有状态,也就不需要针对 Vue 反应式系统等额外的初始化了。

虽然仍会对新传入的 props 等做出反应,但对于组件自身,并不知晓其数据何时改变,因为其并不维护自己的状态。

对于指标爱好者,我也做了一个性能测试:分别用状态化组件和函数式组件渲染 1000 条长的列表,两者用时分别是 140ms 及 40ms 。

When - 何时该用函数式组件?

函数式组件也不是万金油。说到底,使用一个 JavaScript 框架来构建应用图的不就是更好的反应性嘛。在这一点上对于 Vue 来说,其反应式系统仍是不可替代的。

然而仍有一些函数式组件能大展拳脚的用例:

  • 显式逻辑特别简单的组件,也叫“哑(dumb)”组件。比如按钮、卡片、标签甚至纯静态的“关于”页面等。
  • 一个被用来包裹模板置标或丰富其他组件基础功能的高阶组件。
  • 每当你发现自己陷入了一个循环渲染 (v-for),其遍历对象往往就适用函数式组件

派生值

在特别的场景中,我还是发现了一个小问题。当使用 <template> 标签,并且从 props 中访问一个数据时,有时需要在模板中渲染加工过的数据。

使用标准的 Vue 组件时,用 methods 也好 computed 也罢,这都易如反掌。但对于函数式组件,这两个是不可用的。

也不是没有辙。

就拿经典的 fullName 例子来说,在一个函数式 <template> 中,可以通过直接在组件定义中提供一个方法,并在之后使用 Vue 提供的 $options 属性来调用我们自定义的方法,以达到目的:

函数式组件中的“计算属性”

其他问题

社区中有人发现,当嵌套有着 scoped slots 的函数式组件时,表现并不正常 https://github.com/vuejs/vue-loader/issues/1136

总结

如果你关注性能,或正在开发大型应用,可以考虑使用函数式组件。微不足道的学习曲线将带来巨大的性能收益。

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 复用 Vue 组件的 6 层手段

    原文:https://michaelnthiessen.com/6-levels-of-reusability/?cksubscriberid=68763622...

    江米小枣
  • [译] React 中的 dumb 组件和 smart 组件

    原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a6...

    江米小枣
  • [译] 状态管理中的第一性原理

    如你所见,在任何前端框架中,包括 React、Angular 和 Svelte -- 这只是其中很少几个的名字,关于状态如何运转都存在着很多基础性的概念。

    江米小枣
  • 8种vue组件通信方式详细解析实例

    对于vue来说,组件是非常常见的,有很多平台都封装了了属于自己一套的组件,如element ui、we ui等等。同时组件之间的消息传递也是非常重要的,下面是我...

    Javanx
  • ExtJS关于组件Component生命周期

      初始化工作开始于组件的诞生,所有必须的配置设定、事件注册、预渲染处理等都在此时进行。

    yaohong
  • Vue 开发技巧总结

    v-model 是 Vue 提供的一个语法糖,它本质上是由 value 属性 + input 事件组成的(都是原生的默认属性)

    Krry
  • 【美团技术团队博客】前端组件化开发实践

    前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

    美团技术团队
  • 【腾讯轻舟Raft】后台组件的治理思路

    | 导语 腾讯轻舟平台(RAFT,Rapid Application Framework of Tencent)是一个致力于组件治理,为创新型应用提供“端云一...

    腾讯大讲堂
  • React组件应该如何封装?

    相反,紧耦合的系统会失去上面描述的好处。主要缺点是很难修改高度依赖于其他组件的组件。即使是一处修改,也可能导致一系列的依赖组件需要修改。

    胡哥有话说
  • 业务系统组件化开发概述和技术架构设计

    今天介绍下组件化开发方面的内容,在前面我讲解微服务的时候就已经谈到,实际上微服务本身就是传统的业务系统组件化开发的一个升级。懂得基础的组件化开发和技术架构设计是...

    猿天地

扫码关注云+社区

领取腾讯云代金券