我是在知乎上看到的這個問題，轉念一想，用了大半年的vue，好像真的沒有了解過：
‘為什么只能有且只有一個根元素'
于是我花了二十多分鐘去找了一下答案......竟然沒有找到答案....
好的現在我來說說我的理解，如果有不對的地方歡迎指出。
我覺得這個問題需要從兩個方面來說起：
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開發環境下，使用單文件組件時，你可能會這樣：
<template><div class='component'></div></template>
那這里為什么template下也必須有且只能有一個div呢？
這里我們要先看一看template這個標簽，這個標簽是HTML5出來的新標簽，它有三個特性：
1.隱藏性：該標簽不會顯示在頁面的任何地方，即便里面有多少內容，它永遠都是隱藏的狀態；
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會被自然的處理成程序的入口。
通過這個‘根節點'，來遞歸遍歷整個vue‘樹'下的所有節點，并處理為vdom，最后再渲染成真正的HTML，插入在正確的位置
新聞熱點
疑難解答
圖片精選
