在所有组件之下，组件只是返回一些HTML的函数。这是一个强大的简化，如果你曾经研究过Vue代码库的复杂性，你就会知道这实际上不是真的。但从根本上说，这就是Vue为我们所做的。看看这个组件：这是用Javascript实现的，它做同样的事情：functioncomponent(title){lethtml='';html+='

';returnhtml;}这段代码和Vue组件构造HTML的方式基本一致。当然，这里没有响应、事件处理或一堆其他功能，但是获取输出HTML是一回事。如果您从未想过以这种方式考虑组件，那很好，很多人也没有。当你开始学习Vue时，你会看到新的语法和所有这些看起来不像我们以前接触过的东西。靠编程基础一旦我们真正认识到Vue组件其实只是函数，那么我们就能发现一些隐藏的知识点。我们从学习Javascript或任何其他编程语言中学到的东西都可以应用于Vue。例如，假设我们想学习如何编写优雅干净的Vue组件。我们可以将我们学到的关于编写干净的Javascript的知识应用到Vue组件中。即使在学习React或Angular等类似框架时，保持函数较小、使用描述性名称等也是有用的练习。现在让我们看一个更详细的例子。从新的角度重构假设有以下组件之一：为了简化，我们把v-for里面的内容变成一个新的组件，像这样:完成后，我们将其替换为父组件，这将我们从冗余嵌套中解放出来：如果我们正在编写Javascript，我们将以几乎完全相同的方式来执行此操作。这是一个使用循环函数的示例goingLoopy(){constelements=document.querySelectorAll('.item');for(constelofelements){const{width}=el.getBoundingClientRect();if(width>500){el.classList。add('large');}}}在这里，我们使用DOM方法获取所有class为item的元素，如果大于500px，则添加largeclass。这已经足够好了，但是如何优化代码呢？我的猜测是，您可以将for..of内容放入一个新函数中：functionupdateElement(el){const{width}=el.getBoundingClientRect();if(width>500){el.classList.add('large');}}functiongoingLoopy(){constelements=document.querySelectorAll('.item');for(constelofelements){updateElement(el);}}如果你把组件看成一个函数，它会更深入地理解我们优化。他们总是在你的脑海里，你只是没有意识到。作者：MichaelThiessen译者：前端小智来源：medium来源：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713本文转载自微信公众号「****」，可以通过以下二维码关注。转载请联系****公众号。