什么是組件？本篇文章帶大家深入理解一下Vue中的組件，聊聊組件的渲染、組件的拓展，希望對大家有所幫助！

Vue.js組件的本質(zhì)及相應(yīng)的渲染實現(xiàn)

引言

如果你正在使用Vue.js，那么我想你一定對Vue單文件組件（SFC）不陌生，它是Vue.js框架提供的一種文件格式，在絕大多數(shù)應(yīng)用場景中都是Vue.js官方推薦的項目組織形式，本文就讓我們以單文件組件為源去回溯一下組件的本質(zhì)?！鞠嚓P(guān)推薦：vuejs視頻教程】

什么是組件

在Vue.js中，單文件組件可以認為是對Vue.js組件的進一步封裝，它雜糅了HTML、JavaScript以及CSS三種元素的特點，以<template>、<script>及<style>三大塊將與一個組件相關(guān)的視圖、邏輯以及樣式整合到了一個基本的特殊文件單位之中，下面是一個單文件組件的示例：

你可能不知道，其實在Vue.js內(nèi)部，上述單文件組件會經(jīng)由@vue/compiler-sfc編譯為標準的JavaScript和CSS，編譯后的JavaScript文件可能如下(個人推測，如錯，煩請指正)：

這個函數(shù)的返回值是不是很熟悉？這就是一個虛擬DOM對象，在這里你就可以稱這個函數(shù)為組件！（如果你對虛擬DOM還不熟悉，請參閱我的這篇筆記-為什么Vue.js中要采用虛擬DOM）

對，這就是組件，組件的實質(zhì)其實就是對一組DOM元素的封裝。現(xiàn)在，讓我們自己定義一個組件來熟悉鞏固一下：

綜上，我們可以定義一個函數(shù)來代表組件，而函數(shù)的返回值就代表組件要渲染的內(nèi)容。

組件的渲染

從上文可以看到，組件的返回值就是虛擬DOM對象，它代表著組件想要渲染的內(nèi)容。那么在Vue.js中組件是如何渲染的呢？（如果你對Vue.js中虛擬DOM的渲染原理還不甚了解，可以參閱一下我這篇筆記-淺析Vue.js的運行時編譯）

為了更加直觀地描述，我們先用一個虛擬DOM對象中的tag標簽來儲存組件函數(shù)：

你可能對這種描述不是太熟悉，因為以前接觸到的虛擬DOM可能都是用tag屬性值來描述HTML標簽，其實，只要得到渲染器的支持，tag: MyComponent是完全符合語法的。此時，負責把虛擬DOM渲染為真實DOM的渲染器代碼實現(xiàn)原理如下：

組件的拓展

還記得組件的實質(zhì)是什么嗎？組件的實質(zhì)就是對一組DOM元素的封裝！那么問題來了，在上文中一直都是用一個函數(shù)來自定義組件，但是組件的表示方式只能是函數(shù)嗎？不不不，當然不是，你完全可以使用一個JavaScript對象來自定義組件，如下：

在這個MyComponent對象中，屬性render函數(shù)的返回值是一個虛擬DOM對象，代表著此組件的渲染內(nèi)容。相應(yīng)的，為了能夠正常使用對象組件渲染DOM，需要對上述舉例的渲染器做相應(yīng)的修改適配，修改如下：

在上述代碼中，vnode.tag就是表達組件的對象。其實在Vue.js中也有使用對象結(jié)構(gòu)來表達的組件，即有狀態(tài)組件。

聲明

• 本文屬于讀書筆記一類，是作者在拜讀 霍春陽 大佬的新作《Vue.js設(shè)計與實現(xiàn)》途中，以書中內(nèi)容為藍本，輔以個人微末的道行“填寫”完成，推薦購書閱讀，定有收獲
• 歡迎大佬斧正

（學習視頻分享：vuejs教程、web前端）

以上就是什么是組件？帶你深入理解Vue.js組件！的詳細內(nèi)容，更多請關(guān)注風君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的什么是组件？带你深入理解Vue.js组件！(为什么用VUE)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。