搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 云前端 > [译]: Vue.js 函数式组件:what, why & when?

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

云前端 2020-07-02

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


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

What - 何为函数式组件?

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

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

基于模板的函数式组件

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

基于 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 参数相当简单。举例来说,如果想获得属性,这样就可以:

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

在模板中访问上下文

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

在 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

总结

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

扩展阅读



--End--


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《[译]: Vue.js 函数式组件:what, why & when?》的版权归原作者「云前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注云前端微信公众号

云前端微信公众号:fewelife

云前端

手机扫描上方二维码即可关注云前端微信公众号

云前端最新文章

精品公众号随机推荐