很多人不知道 Vue 中的组件就是一个函数!

开发 架构
在所有组件之下,组件只是返回一些HTML的函数。这是一个强大的简化,如果你曾研究过Vue代码库的复杂性,那么你就会知道这实际上不是事实。但是从根本上讲,这就是Vue为我们所做的事情。

 在所有组件之下,组件只是返回一些HTML的函数。

[[333552]]

这是一个强大的简化,如果你曾研究过Vue代码库的复杂性,那么你就会知道这实际上不是事实。但是从根本上讲,这就是Vue为我们所做的事情。

看一下这个组件:

  1. <template> 
  2.   <div> 
  3.     <h1>{{ title }}</h1> 
  4.     <p>Some words that describe this thing</p> 
  5.     <button>Clickity click!</button> 
  6.   </div> 
  7. </template> 

 

下面是用 Javascript 实现,它做了同样的事情:

 

 

  1. function component(title) { 
  2.   let html = ''
  3.  
  4.   html += '<div>'
  5.   html += `<h1>${title}</h1>`; 
  6.   html += '<p>Some words that describe this thing</p>'
  7.   html += '<button>Clickity click!</button>'
  8.   html += '</div>'
  9.  
  10.   return html; 

该代码与Vue组件构造HTML 方式基本相同。当然,这里没有响应性,事件处理或其它一系列功能,但是获取输出的 HTML 是同一回事。

如果你从未想过以这种方式考虑组件,那很正常,很多人也没有。

当你开始学习Vue时,会看到新的语法和所有这些神奇的东西,它们看起来与我们以前接触过的任何东西都不太一样。

依靠编程基础

一旦真正意识到 Vue 组件实际上只是函数,那么我们就可以发现一些隐藏的知识点。

我们可以从学习 Javascript 或任何其他编程语言中学到的知识应用到 Vue 中。

例如,假设我们想学习如何编写优雅和简洁的Vue组件。我们可以将所学到的编写干净 Javascript 的知识应用到Vue组件中。比如保持函数简小,使用描述性名称,等等

即使是学习类似的框架,如React或Angular,也是非常有用的练习。

现在让我们看一个更详细的例子。

以新的视角进行重构

假设有以下的一个组件:

  1. <template> 
  2.   <div> 
  3.     <h1>{{ title }}</h2> 
  4.     <div class="navigation"
  5.       <!-- ... --> 
  6.     </div> 
  7.  
  8.     <div v-for="item in list"
  9.       <h2 class="item-title"
  10.         {{ item.title }} 
  11.       </h2> 
  12.       <p class="item-description"
  13.         {{ item.description }} 
  14.       </p> 
  15.     </div> 
  16.  
  17.     <footer> 
  18.       <!-- ... --> 
  19.     </footer> 
  20.   </div> 
  21. </template> 

 

为简化,我们将v-for内部的内容变成了一个新的组件,如下所示:

  1. <template> 
  2.   <div> 
  3.     <h2 class="item-title"
  4.       {{ item.title }} 
  5.     </h2> 
  6.     <p class="item-description"
  7.       {{ item.description }} 
  8.     </p> 
  9.   </div> 
  10. </template> 

 

完成此操作后,我们将其替换为父组件,这使我们摆脱了多余的嵌套:

  1. <template> 
  2.   <div> 
  3.     <h1>{{ title }}</h2> 
  4.     <div class="navigation"
  5.       <!-- ... --> 
  6.     </div> 
  7.  
  8.     <ListItem 
  9.       v-for="item in list" 
  10.       :item="item" 
  11.     /> 
  12.  
  13.     <footer> 
  14.       <!-- ... --> 
  15.     </footer> 
  16.   </div> 
  17. </template> 

 

如果我们在写Javascript,我们会用几乎完全相同的方式来做这些。

下面是一个使用循环的例子

  1. function goingLoopy() { 
  2.   const elements = document.querySelectorAll('.item'); 
  3.  
  4.   for (const el of elements) { 
  5.     const { width } = el.getBoundingClientRect(); 
  6.     if (width > 500) { 
  7.       el.classList.add('large'); 
  8.     } 
  9.   } 

在这里,我们使用 DOM 方法获取了类为 item 的所有元素,如果它们大于500px,则将large类添加其中。

这已经很好了,但是如果还要优化代码,应该怎么做呢

我的猜测是,你可能会把for..of的内容带入一个新函数中:

  1. function updateElement(el) { 
  2.   const { width } = el.getBoundingClientRect(); 
  3.   if (width > 500) { 
  4.     el.classList.add('large'); 
  5.   } 
  6.  
  7. function goingLoopy() { 
  8.   const elements = document.querySelectorAll('.item'); 
  9.  
  10.   for (const el of elements) { 
  11.     updateElement(el); 
  12.   } 

如果你将组件看作是一个函数,那么对于我们的优化会有更深入的了解。

他们一直在你脑海中,你只是没有意识到。

作者:Michael Thiessen 译者:前端小智 来源:medium

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

本文转载自微信公众号「****」,可以通过以下二维码关注。转载本文请联系****公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-06-29 08:28:36

v-for 解构函数

2021-01-15 05:39:13

HashMapHashTableTreeMap

2020-07-07 08:35:53

VueKey组件

2015-07-22 11:53:29

云计算AWS分析瘫痪

2021-08-24 00:13:23

Windows 10Windows微软

2022-12-05 15:23:33

JavaScript技巧运算符

2021-08-27 10:03:12

人工智能AI

2020-11-20 06:13:04

Like %

2019-01-07 09:27:39

2018-08-10 10:36:25

SSL证书误区

2020-07-01 08:36:43

CSS规范web

2019-12-13 19:52:29

人工智能AI

2020-11-16 11:24:00

Spring AOP数据库

2021-05-08 23:19:25

微信存储小程序

2023-06-05 08:07:34

聚集索引存储数据

2022-06-23 13:13:36

GitHub开发技巧

2021-01-07 05:27:20

包导入变量

2021-12-14 10:55:14

Python元素数据

2021-01-12 12:33:20

Pandas技巧代码

2021-02-22 13:14:00

计算机编程技术
点赞
收藏

51CTO技术栈公众号