什么是组件？本篇文章带大家深入理解一下vue中的组件，聊聊组件的渲染、组件的拓展，希望对大家有所帮助！
vue.js组件的本质及相应的渲染实现引言
如果你正在使用vue.js，那么我想你一定对vue单文件组件（sfc）不陌生，它是vue.js框架提供的一种文件格式，在绝大多数应用场景中都是vue.js官方推荐的项目组织形式，本文就让我们以单文件组件为源去回溯一下组件的本质。【相关推荐：vuejs视频教程】
什么是组件
在vue.js中，单文件组件可以认为是对vue.js组件的进一步封装，它杂糅了html、javascript以及css三种元素的特点，以<template>、<script>及<style>三大块将与一个组件相关的视图、逻辑以及样式整合到了一个基本的特殊文件单位之中，下面是一个单文件组件的示例：
你可能不知道，其实在vue.js内部，上述单文件组件会经由@vue/compiler-sfc编译为标准的javascript和css，编译后的javascript文件可能如下(个人推测，如错，烦请指正)：
这个函数的返回值是不是很熟悉？这就是一个虚拟dom对象，在这里你就可以称这个函数为组件！（如果你对虚拟dom还不熟悉，请参阅我的这篇笔记-为什么vue.js中要采用虚拟dom）
对，这就是组件，组件的实质其实就是对一组dom元素的封装。现在，让我们自己定义一个组件来熟悉巩固一下：
综上，我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲染的内容。
组件的渲染
从上文可以看到，组件的返回值就是虚拟dom对象，它代表着组件想要渲染的内容。那么在vue.js中组件是如何渲染的呢？（如果你对vue.js中虚拟dom的渲染原理还不甚了解，可以参阅一下我这篇笔记-浅析vue.js的运行时编译）
为了更加直观地描述，我们先用一个虚拟dom对象中的tag标签来储存组件函数：
你可能对这种描述不是太熟悉，因为以前接触到的虚拟dom可能都是用tag属性值来描述html标签，其实，只要得到渲染器的支持，tag: mycomponent是完全符合语法的。此时，负责把虚拟dom渲染为真实dom的渲染器代码实现原理如下：
组件的拓展
还记得组件的实质是什么吗？组件的实质就是对一组dom元素的封装！那么问题来了，在上文中一直都是用一个函数来自定义组件，但是组件的表示方式只能是函数吗？不不不，当然不是，你完全可以使用一个javascript对象来自定义组件，如下：
在这个mycomponent对象中，属性render函数的返回值是一个虚拟dom对象，代表着此组件的渲染内容。相应的，为了能够正常使用对象组件渲染dom，需要对上述举例的渲染器做相应的修改适配，修改如下：
在上述代码中，vnode.tag就是表达组件的对象。其实在vue.js中也有使用对象结构来表达的组件，即有状态组件。
声明
本文属于读书笔记一类，是作者在拜读 霍春阳 大佬的新作《vue.js设计与实现》途中，以书中内容为蓝本，辅以个人微末的道行“填写”完成，推荐购书阅读，定有收获欢迎大佬斧正原文地址：https://juejin.cn/post/7068956595169787918
作者：将焕
（学习视频分享：vuejs教程、web前端）
以上就是什么是组件？带你深入理解vue.js组件！的详细内容。