这是一个强大的简化，如果你曾研究过Vue代码库的复杂性，那么你就会知道这实际上不是事实。但是从根本上讲，这就是Vue为我们所做的事情。

看一下这个组件：

1. <template> 
2.   <div> 
3.     <h1>{{ title }}</h1> 
4.     <p>Some words that describe this thing</p> 
5.     <button>Clickity click!</button> 
6.   </div> 
7. </template> 

下面是用 Javascript 实现，它做了同样的事情：

1. function component(title) { 
2.   let html = ''; 
3.  
4.   html += '<div>'; 
5.   html += `<h1>${title}</h1>`; 
6.   html += '<p>Some words that describe this thing</p>'; 
7.   html += '<button>Clickity click!</button>'; 
8.   html += '</div>'; 
9.  
10.   return html; 
11. } 

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

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

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

依靠编程基础

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

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

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

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