這篇文章主要為大家展示了Vue中template為什么有且只能一個(gè)root，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),璧山企業(yè)網(wǎng)站建設(shè),璧山品牌網(wǎng)站建設(shè),網(wǎng)站定制,璧山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,璧山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

引言

今年， 疫情 并沒(méi)有影響到各種面經(jīng)的正常出現(xiàn)，可謂是絡(luò)繹不絕（學(xué)不動(dòng)...）。然后，在前段時(shí)間也看到一個(gè)這樣的關(guān)于 Vue 的問(wèn)題， 為什么每個(gè)組件 template 中有且只能一個(gè) root？

可能，大家在平常開(kāi)發(fā)中，用的較多就是 template 寫(xiě) html 的形式。當(dāng)然，不排除用 JSX 和 render() 函數(shù)的。但是，究其本質(zhì)，它們最終都會(huì)轉(zhuǎn)化成 render() 函數(shù)。然后，再由 render() 函數(shù)轉(zhuǎn)為 Vritual DOM （以下統(tǒng)稱(chēng) VNode ）。而 render() 函數(shù)轉(zhuǎn)為 VNode 的過(guò)程，是由 createElement() 函數(shù)完成的。

因此，本次文章將會(huì)先講述 Vue 為什么限制 template 有且只能一個(gè) root 。然后，再分析 Vue 如何規(guī)避出現(xiàn)多 root 的情況。那么，接下來(lái)我們就從源碼的角度去深究一下這個(gè)過(guò)程！

一、為什么限制 template 有且只能有一個(gè) root

這里，我們會(huì)分兩個(gè)方面講解，一方面是 createElement() 的執(zhí)行過(guò)程和定義，另一方面是 VNode 的定義。

1.1 createElement()

createElement() 函數(shù)在源碼中，被設(shè)計(jì)為 render() 函數(shù)的參數(shù)。所以 官方文檔 也講解了，如何使用 render() 函數(shù)的方式創(chuàng)建組件。

而 createElement() 會(huì)在 _render 階段執(zhí)行：

...
const { render, _parentVnode } = vm.$options
...
vnode = render.call(vm._renderProxy, vm.$createElement);

當(dāng)前標(biāo)題：Vue中template為什么有且只能一個(gè)root-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/cephso.html