vue為什么必須包含div？

我們在初學Vue時，第一個上手的例子基本都是 new Vue({el:’#app’})，但是為什么Vue實例只能掛載在一個div上呢？同樣的當我們開始寫第一個Vue頁面的時候，我們試圖在template標簽下寫兩個div，Vue提醒我們只能寫一個元素，但是為什么只能有一個元素呢？很多時候我們都已經習以為常，但是卻說不上來為什么。

筆者入坑Vue也有一段時間了，對Vue也算了解，Vuex、Vue-Router也用了不少；但是前幾天一看到這個面試問題卻感覺一下子回答不上了，想來每次寫代碼也都是拿來就用，也沒有仔細的思考過里面的原因；每每報錯了就換一種寫法，能用就行，僅此而已。

這個問題要從兩個方面來說：

當我們實例化Vue的時候，填寫一個el選項，來指定我們的SPA入口： 如果我們把代碼改造一下，變成兩個入口。

這時候會發現只有第一個div被渲染出來，而第二個div還是原封不動。我們簡單來看一下Vue的源碼是如何實現的可以看到掛載函數傳了一個el參數，這個參數可以是string類型，也可以是一個element元素，也就是dom節點。最重要的是el = el && query(el)這一行代碼，那就繼續看一下query函數是做什么的：首先query函數判斷是否是string類型，如果是string類型，就通過querySelector函數獲取頁面中的元素，但是querySelector僅僅返回匹配指定選擇器的第一個元素，所以這就解釋了為什么第二個div會原封不動。

Vue其實并不知道哪一個才是我們的入口，因為對于一個入口來講，這個入口就是一個Vue類，Vue需要把這個入口里面的所有東西拿來渲染、處理，最后再重新插入到dom中。如果同時設置了多個入口，那么vue就不知道哪一個才是這個類。