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

Posted 2021-03-30 云前端

原文：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 函数中访问上下文

以上是关于[译]: Vue.js 函数式组件：what, why & when?的主要内容，如果未能解决你的问题，请参考以下文章

(译)What does explicit keyword mean?

【译】在 React 中拥抱函数——无状态函数式组件及其重要性

[译]怎样在Vue.js中使用jquery插件

译Vue源码学习：Vue对象构造函数

vue3.0js 非prop属性的值和setup函数的使用

Vue.js入门学习