function component(title) { 
  
  
  
  
  let html = ''; 
  
  
  
  
 
  
  
  
  
  html += '
'; 
  
  
  
  
  html += `
${title}
`; 
  
  
  
  
  html += '
Some words that describe this thing
'; 
  
  
  
  
  html += 'Clickity click!'; 
  
  
  
  
  html += '

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

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

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

依靠编程基础

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

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

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

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

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

以新的视角进行重构

假设有以下的一个组件：

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

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

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

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

 
 
 
 

  
  
  
  
function goingLoopy() { 
  
  
  
  
  const elements = document.querySelectorAll('.item'); 
  
  
  
  
 
  
  
  
  
  for (const el of elements) { 
  
  
  
  
    const { width } = el.getBoundingClientRect(); 
  
  
  
  
    if (width > 500) { 
  
  
  
  
      el.classList.add('large'); 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

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

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

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

 
 
 
 

  
  
  
  
function updateElement(el) { 
  
  
  
  
  const { width } = el.getBoundingClientRect(); 
  
  
  
  
  if (width > 500) { 
  
  
  
  
    el.classList.add('large'); 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function goingLoopy() { 
  
  
  
  
  const elements = document.querySelectorAll('.item'); 
  
  
  
  
 
  
  
  
  
  for (const el of elements) { 
  
  
  
  
    updateElement(el); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

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

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

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

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

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

名称栏目：很多人不知道Vue中的组件就是一个函数！
浏览地址：http://www.mswzjz.cn/qtweb/news37/387037.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能