這篇文章將為大家詳細(xì)講解關(guān)于vue 組件的介紹，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)雞西,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

Vue的兩大核心

1. 數(shù)據(jù)驅(qū)動(dòng) - 數(shù)據(jù)驅(qū)動(dòng)界面顯示

2. 模塊化 - 復(fù)用公共模塊，組件實(shí)現(xiàn)模塊化提供基礎(chǔ)

組件基礎(chǔ)

組件渲染過程

template ---> ast（抽象語法樹） ---> render ---> VDom(虛擬DOM) ---> 真實(shí)的Dom ---> 頁面

Vue組件需要編譯，編譯過程可能發(fā)生在

• 打包過程 （使用vue文件編寫）
• 運(yùn)行時(shí)（將字符串賦值template字段，掛載到一個(gè)元素上并以其 DOM 內(nèi)部的 HTML 作為模板)

對(duì)應(yīng)的兩種方式 runtime-only vs runtime-compiler

runtime-only（默認(rèn)）

• 打包時(shí)只包含運(yùn)行時(shí)，因此體積更少
• 將template在打包的時(shí)候，就已經(jīng)編譯為render函數(shù)，因此性能更好

runtime-compiler

• 打包時(shí)需要包含（運(yùn)行時(shí) + 編譯器），因此體積更大，大概多10Kb
• 在運(yùn)行的時(shí)候才把template編譯為render函數(shù)，因此性能更差

啟用runtime-compiler

vue.config.js（若沒有手動(dòng)創(chuàng)建一個(gè)）

module.exports = {
 runtimeCompiler: true //默認(rèn)false
}

組件定義

1. 字符串形式定義（不推薦）

例子

const CustomButton = {
 template: "自定義按鈕"
};

這種形式在運(yùn)行時(shí)才把template編譯成render函數(shù)，因此需要啟用運(yùn)行時(shí)編譯（runtime-compiler）

2. 單文件組件（推薦）

創(chuàng)建.vue后綴的文件，定義如下