在所有组件之下,组件只是返回一些HTML的函数。
这是一个强大的简化,如果你曾研究过Vue代码库的复杂性,那么你就会知道这实际上不是事实。但是从根本上讲,这就是Vue为我们所做的事情。
看一下这个组件:
<template>
<div>
<h1>{{ title }}</h1>
<p>Some words that describe this thing</p>
<button>Clickity click!</button>
</div>
</template>
下面是用 Javascript 实现,它做了同样的事情:
function component(title) {
let html = '';
html += '<div>';
html += `<h1>${title}</h1>`;
html += '<p>Some words that describe this thing</p>';
html += '<button>Clickity click!</button>';
html += '</div>';
return html;
}
该代码与Vue组件构造HTML 方式基本相同。当然,这里没有响应性,事件处理或其它一系列功能,但是获取输出的 HTML 是同一回事。
如果你从未想过以这种方式考虑组件,那很正常,很多人也没有。
当你开始学习Vue时,会看到新的语法和所有这些神奇的东西,它们看起来与我们以前接触过的任何东西都不太一样。
依靠编程基础
一旦真正意识到 Vue 组件实际上只是函数,那么我们就可以发现一些隐藏的知识点。
我们可以从学习 Javascript 或任何其他编程语言中学到的知识应用到 Vue 中。
例如,假设我们想学习如何编写优雅和简洁的Vue组件。我们可以将所学到的编写干净 Javascript 的知识应用到Vue组件中。比如保持函数简小,使用描述性名称,等等
即使是学习类似的框架,如React或Angular,也是非常有用的练习。
现在让我们看一个更详细的例子。
以新的视角进行重构
假设有以下的一个组件:
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<div v-for="item in list">
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
<footer>
<!-- ... -->
</footer>
</div>
</template>
为简化,我们将v-for内部的内容变成了一个新的组件,如下所示:
<template>
<div>
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
</template>
完成此操作后,我们将其替换为父组件,这使我们摆脱了多余的嵌套:
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<ListItem
v-for="item in list"
:item="item"
/>
<footer>
<!-- ... -->
</footer>
</div>
</template>
如果我们在写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
相关热门推荐
ES6 中 module 备忘清单,你可能知道 module 还可以这样用!
很多人不知道可以使用这种 key 的方式来对 Vue 组件进行重新渲染!
CSS Viewport 单位,很多人还不知道使用它来快速布局!
小智最近在学习正则,学习过程中发现这 6 个方便的正则表达式
详解 ES10 中 Object.fromEntries() 的缘起