开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

上一篇文章讲了vue的实例的初始化，当你初始化完成之后，你就可以开始写组件了。

什么是组件

组件一个UI组合或者某一个功能的组合，我们可以把一个单独的功能或者某些相关联的功能或者UI封装成一个组件。

封装组件其实就是你对项目功能或者UI的理解，就好像一篇文章，没有分段，没有标点符号。你需要自己去划分段落，只要你划分的结果不影响文章的真实表达，那么都是对的。

正所谓兵无常势，水无常形，划分组件并没有对错合理之分，只要你能实现功能，都是正确的。但是当你后期维护的时候，你会知道好与不好。就好像你练个普通内功，跟别人练九阳神功，那威力能一样吗？好了不扯远了，但是我觉得我举得例子还是挺好的。

Vue组件

我们常听说vue组件叫SFC，单文件组件，那么什么是单文件组件呢？

<template></template>
<script></script>
<style></style>

在vue的设计中，单文件组件由3部分组成:

• template === 模板，其实就是html
• script === js，其实就是功能逻辑
• style === css，其实就是样式 当vue编译时，会把这三块提取出来，通过不同的编译插件或者loader，最后完成打包。

Vue组件的本质

当我最开始写vue的时候，我以为组件有且必须有这三个标签，但其实这三个标签并不是充分必要条件，如果你写一个单文件组件，缺少任意一个标签都是不影响的，为什么不影响呢？这就牵涉到了组件的本质。

我认为Vue组件的本质就是对象，我们假设vue要求的对象是这个格式

const component = {
    name:'test',
    template:'',
    script:{},
    css:{}
}

如果我们少写一个标签，无非是对象里少了一个属性，当我们渲染的时候加上if判断就可以了。

我们也可以不要template和style，然后通过vue提供的render函数直接渲染模板，如果再搭配jsx，可以实现出类似react的效果。

但我觉得这样并没有必要，vue的单文件组件已经很合理了，能够满足绝大多数情况，没必要非得东施效颦，邯郸学步。

vue就是vue,它不是react，它是不一样的烟火