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

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

原文:medium.com/js-dojo/vue…

要义:如果你的组件不需要状态化,将其转换为一个 函数式组件(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 的函数式组件时,表现并不正常 github.com/vuejs/vue-l…

总结

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

扩展阅读



相关文章
|
19天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1月前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
193 63
|
11天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
19天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
214 90
|
23小时前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
5 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
12天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
35 5
Vue使用element中table组件实现单选一行
|
14天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
62 22
|
23小时前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
7 2
|
22小时前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
7 1
|
1天前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
10 1