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

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

引言

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

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

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

一、為什么限制 template 有且只能有一個 root

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

1.1 createElement()

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

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

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

當(dāng)前名稱：Vue中template為什么有且只能一個root-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.rwnh.cn/article30/cephso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開發(fā)、App設(shè)計、企業(yè)網(wǎng)站制作、云服務(wù)器、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)