筆者入坑vue也有一段時間了，對vue也算了解，vuex、vue-router也用了不少；但是前幾天一看到這個面試問題卻感覺一下子回答不上了，想來每次寫**也都是拿來就用，也沒有仔細的思考過裡面的原因；每每報錯了就換一種寫法，能用就行，僅此而已。
這個問題要從兩個方面來說：
單檔案元件中，template下的元素div
當我們例項化vue的時候，填寫乙個el選項，來指定我們的spa入口：
let vm =
newvue(}
)
>
>
}div
>
body
>
let vm =
newvue(}
)
>
class
=>
}div
>
class
=>
}div
>
body
>
vue.prototype.
$mount
=function
( el?
: string | element,
hydrating?
: boolean
): component
//以下省略無關**
//...
}
掛載函式傳了乙個el引數，這個引數可以是string型別，也可以是乙個element元素，也就是dom節點。最重要的是el = el && query(el)這一行**，那就繼續看一下query函式是做什麼的：
/**
* query an element selector if it's not an element already.
*/export
function
query
(el: string | element)
: element
return selected
}else
}
string型別，如果是string型別，就通過queryselector函式獲取頁面中的元素，但是queryselector僅僅返回匹配指定選擇器的第乙個元素，所以這就解釋了為什麼第二個div會原封不動。
vue其實並不知道哪乙個才是我們的入口，因為對於乙個入口來講，這個入口就是乙個vue類，vue需要把這個入口裡面的所有東西拿來渲染、處理，最後再重新插入到dom中。如果同時設定了多個入口，那麼vue就不知道哪乙個才是這個類。
當我們在vue-cli腳手架搭建的vue開發環境下使用單檔案元件時，一般會這麼寫：
>
class
="box"
>
這裡是頁面內容
div>
template
>
這裡我們要先看一看template這個標籤，這個標籤是html5出來的新標籤，它有三個特性：
但是我們可以通過innerhtml來獲取到裡面的內容。
知道了這個，我們再來看.vue的單檔案元件。其實本質上，乙個單檔案元件會被各種各樣的loader處理成為.js檔案（因為當你import乙個單檔案元件並列印出來的時候，是乙個vue例項），通過template的任意性我們知道，template包裹的html可以寫在任何地方，那麼對於乙個.vue來講，這個template裡面的內容就是會被vue處理為虛擬dom並渲染的內容，導致結果又回到了開始 ：既然乙個.vue單檔案元件是乙個vue例項，那麼這個例項的入口在**？
如果在template下有多個div，那麼該如何指定這個vue例項的根入口？
為了讓元件能夠正常的生成乙個vue例項，那麼這個div會被自然的處理成程式的入口。
通過這個『根節點』，來遞迴遍歷整個vue『樹』下的所有節點，並處理為vdom，最後再渲染成真正的html，插入在正確的位置。
vue為什麼要求元件模板只能有乙個根元素
要從兩個方面來說起 一 當我們例項化vue的時候，填寫乙個el選項，來指定我們的spa入口 let vm newvue div body 這很好理解，就是為vue開啟乙個入口，那我們不妨來想想，如果我在body下這樣 div div body vue其實並不知道哪乙個才是我們的入口，因為對於乙個入口...
vue散記 根template只能有乙個子元素
之前使用過別人寫的vue element專案，在別人搭建好的框架下修修改改 縫縫補補，感覺還行，整體流程還能走的通，但是不能總是用別人搭建好的框架啊。於是就想著自己也用vue cli搭建一套，搭建的過程中也遇到了些問題，有些不理解的，就記下來，因為比較散，就寫個散記系列吧。每個元件檔案中的根temp...
單例模式，乙個類只能有乙個例項。地球只有乙個。
單例設計模式 單例設計模式就是保證某個類的例項有且只能有乙個不能隨意建立例項。例如 我們只有乙個地球，地球類的例項只能建立乙個。1 為了阻止類例項的new建立，可以做乙個private的建構函式。2 既然不能從外部使用new進行例項的建立，就從類內部進行例項的建立，為此可以提供乙個靜態方法和乙個要建...