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

更新時間：2019年07月22日 08:28:02 作者：yang

這篇文章主要介紹了vue為什么要求組件模板只能有一個根元素，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

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

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

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

一、當(dāng)我們實例化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中。

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

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

<template>

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

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

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

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

2.任意性：該標(biāo)簽可以寫在頁面的任何地方，甚至是head、body、sciprt標(biāo)簽內(nèi)；

3.無效性：該標(biāo)簽里的任何HTML內(nèi)容都是無效的，不會起任何作用；

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

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

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

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: