作者：MichaelThiessen译者：前端小智来源：在medium点赞然后阅读，微信搜索【大千世界】关注这个没有大厂背景，但是有积极的态度。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。在所有组件之下，组件只是返回一些HTML的函数。这是一个强大的简化，如果你曾经研究过Vue代码库的复杂性，你就会知道这实际上不是真的。但从根本上说，这就是Vue为我们所做的。看看这个组件：下面是用Javascript实现的，做同样的事情：functioncomponent(title){lethtml='';html+='

';returnhtml;}这段代码和Vue组件构造HTML的方式基本一致。当然，这里没有响应、事件处理或一堆其他功能，但是获取输出HTML是一回事。如果您从未想过以这种方式考虑组件，那很好，很多人也没有。当你开始学习Vue时，你会看到新的语法和所有这些看起来不像我们以前接触过的东西。靠编程基础一旦我们真正认识到Vue组件其实只是函数，那么我们就能发现一些隐藏的知识点。我们从学习Javascript或任何其他编程语言中学到的东西都可以应用于Vue。例如，假设我们想学习如何编写优雅干净的Vue组件。我们可以将我们学到的关于编写干净的Javascript的知识应用到Vue组件中。即使在学习React或Angular等类似框架时，保持函数较小、使用描述性名称等也是有用的练习。现在让我们看一个更详细的例子。从新的角度重构假设有以下组件之一：为了简单起见，我们把v-for里面的内容改成Created新组件如下：完成后，我们将其替换为父组件，这将我们从冗余嵌套中解放出来：如果我们正在编写Javascript，我们将以几乎完全相同的方式执行这里是一个使用循环函数goingLoopy()的示例{常量元素=document.querySelectorAll('.item');for(constelofelements){const{width}=el.getBoundingClientRect();if(width>500){el.classList.add('large');}}}大家都说简历里没项目可写，于是给大家找了一个项目，还给了一个【搭建教程】。在这里，我们使用DOM方法获取所有具有item类的元素，如果它们大于500px，我们将classlarge添加到它们。那很好，但是如果你想优化代码怎么办？我的猜测是，您可能会将for..of的内容放入一个新函数中：functionupdateElement(el){const{width}=el.getBoundingClientRect();if(width>500){el.classList.add('large');}}functiongoingLoopy(){constelements=document.querySelectorAll('.item');for(constelofelements){updateElement(el);}}如果把组件看成一个函数，那么对我们的优化会有更深的理解。他们总是在你的脑海里，你只是没有意识到。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。来源：https://medium.com/js-dojo/vu...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。在这里顺便给大家推荐一个好用的BUG监控工具Fundebug。交流文章每周更新一次。可以微信搜索【大千世界】立即阅读，回复【福利】还有很多前端视频等着你。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，欢迎Star。