当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 19:26:04 vue.js

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

';html+=`

${title}

`;html+='

一些描述这个东西的词

';html+='';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。