詳解vue為什么要求組件模板只能有一個根元素

我是在知乎上看到的這個問題，轉念一想，用了大半年的vue，好像真的沒有了解過：

創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網技術服務公司，擁有項目網站設計、網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元惠州做網站,已為上家服務,為惠州各地企業(yè)和個人服務,聯(lián)系電話:18980820575

‘為什么只能有且只有一個根元素'

于是我花了二十多分鐘去找了一下答案......竟然沒有找到答案....

好的現(xiàn)在我來說說我的理解，如果有不對的地方歡迎指出。

我覺得這個問題需要從兩個方面來說起：

1.new Vue({el:'#app'})

2.單文件組件中，template下的元素div

一、當我們實例化Vue的時候，填寫一個el選項，來指定我們的SPA入口：

let vm = new Vue({

el:'#app'
})

同時我們也會在body里面新增一個id為app的div

<body>

<div id='app'></div>
</body>

這很好理解，就是為vue開啟一個入口，那我們不妨來想想，如果我在body下這樣

<body>

<div id='app1'></div>
<div id='app2'></div>
</body>

Vue其實并不知道哪一個才是我們的入口，因為對于一個入口來講，這個入口就是一個‘Vue類'，Vue需要把這個入口里面的所有東西拿來渲染，處理，最后再重新插入到dom中。

如果同時設置了多個入口，那么vue就不知道哪一個才是這個‘類'。

二、當我們在webpack搭建的vue開發(fā)環(huán)境下，使用單文件組件時，你可能會這樣：

<template>

<div class='component'></div>
</template>

那這里為什么template下也必須有且只能有一個div呢？

這里我們要先看一看template這個標簽，這個標簽是HTML5出來的新標簽，它有三個特性：

1.隱藏性：該標簽不會顯示在頁面的任何地方，即便里面有多少內容，它永遠都是隱藏的狀態(tài)；

2.任意性：該標簽可以寫在頁面的任何地方，甚至是head、body、sciprt標簽內；

3.無效性：該標簽里的任何HTML內容都是無效的，不會起任何作用；

但是呢，你可以通過innerHTML來獲取到里面的內容。

知道了這個，我們再來看.vue的單文件組件。其實本質上，一個單文件組件，本質上（我認為）會被各種各樣的loader處理成為.js文件（因為當你import一個單文件組件并打印出來的時候，是一個vue實例），通過template的任意性我們知道，template包裹的HTML可以寫在任何地方，那么對于一個.vue來講，這個template里面的內容就是會被vue處理為虛擬dom并渲染的內容，導致結果又回到了開始：既然一個.vue單文件組件是一個vue實例，那么這個實例的入口在哪里？

如果在template下有多個div，那么該如何指定這個vue實例的根入口？

為了讓組件能夠正常的生成一個vue實例，那么這個div會被自然的處理成程序的入口。

通過這個‘根節(jié)點'，來遞歸遍歷整個vue‘樹'下的所有節(jié)點，并處理為vdom，最后再渲染成真正的HTML，插入在正確的位置

那么這個入口，就是這個樹的‘根'，各個子元素，子組件，就是這個樹的‘枝葉'，而自然而然地，這棵‘樹'，就是指一個vue實例了。

鏈接： https://github.com/haizlin/fe-interview/issues/457

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前題目：詳解vue為什么要求組件模板只能有一個根元素
URL地址：http://jinyejixie.com/article48/gggehp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、電子商務、云服務器、網站制作、搜索引擎優(yōu)化、網站建設

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

詳解vue為什么要求組件模板只能有一個根元素