你好，我是大圣。

在上一讲中，我给你讲解了响应式的基本原理和进阶用法。除了响应式，组件相关的知识在 Vue 中也非常重要，所以今天我就跟你聊一下 Vue 的组件化机制。

在我们的项目中，组件无处不在，通过对组件功能的封装，可以像搭积木一样开发网页。而我们现在已经很难想象，没有组件的开发状态是什么样了。你可以看下面 Vue 官方的示例图，它对组件化开发做了形象化的展示。图中的左边是一个网页，可以按照功能模块抽象成很多组件，这些组件就像积木一样拼接成网页。

什么是组件化开发

谈组件化开发之前，我们先来看看什么是组件。举个通俗的例子，我们在页面的源码里写出的 button 标签，会在前端页面中显示出下面的样式：

这个 button 其实就是一个组件，这样前端页面在显示上会加上边框和鼠标悬停的样式，还可以使用 click 事件触发函数等。只不过这是浏览器帮我们封装好的组件，我们在编辑代码的任何地方，只需要使用下面的代码，就可以让前端页面显示一个按钮。

<button> 按钮 </button>

除了浏览器自带的组件外，Vue 还允许我们自定义组件，把一个功能的模板（template）封装在一个.vue 文件中。例如在下图中，我们把每个组件的逻辑和样式，也就是把 JavaScript 和 CSS 封装在一起，方便在项目中复用整个组件的代码。

我们实际开发的项目中有导航、侧边栏、表格、弹窗等组件，并且也会引入 Element3 这个组件库进行开发。此外，我们也会定制业务相关的组件，最终通过这些组件，搭积木式地把页面搭建起来。

Vue 已经把组件化的机制实现得很好了，你只需要在这个基础之上，去掌握和学习组件化在使用上的设计理念。这样做的目的是实现高效的代码复用，在后续的项目开发中，我们会把组件分成两个类型，一个是通用型组件，一个是业务型组件。

通用型组件就是各大组件库的组件风格，包括按钮、表单、弹窗等通用功能。业务型组件包含业务的交互逻辑，包括购物车、登录注册等，会和我们不同的业务强绑定。

组件的开发由于要考虑代码的复用性，会比通常的业务开发要求更高，需要有更好的可维护性和稳定性的要求。为了帮助你理解设计组件的要点，我先选择一个简单的组件展开讲解。小圣在继续开发项目的时候，有一个评级的需求，简单来说，就是在前端页面上，能够让商品显示 1 到 5 的评分。我会借此教小圣在组件开发上的入门和应用，并依次讲解组件的设计思路。

渲染评级分数

其实，对于简单的评级需求，我们就可以使用组件。这样，只需要一行代码就可以实现评级需求。比如下面的代码，rate 是 1 到 5 的整数，通过 slice 方法，我们直接渲染出对应数量的星星即可。

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate)