碰到是否有template選項時，會詢問是否要對template進行編譯：

在template編譯（渲染成UI）有一個過程。模板通過編譯生成AST，再由AST生成Vue的渲染函數，渲染函數結合數據生成Virtual DOM樹，對Virtual DOM進行diff和patch后生成新的UI。將上圖細化一下，也就是template編譯的過程如下圖所示：

在深入一點，如下：

有關於Vue中template的渲染的詳細過程，可以閱讀《Vue的模板》一文。

簡理的理解就是Vue中的template編譯成瀏覽器可識的過程會經過不少的過程。言外之意，最終在瀏覽器中呈現的並不是<template>，而是會解析成標准的HTML，然后將組件的標簽替換為對應的HTML片段。用個小示例來舉例：

Vue將會通過其自身的編譯機制（如前圖所示的過程），將<my-component>編譯成讓瀏覽器可以識別的HTML代碼。可以借助瀏覽器開發者工具一探究竟：

我的理解是這樣的。上面的示例通過new Vue()創建一下人Vue的實例，並且將這個實例掛載到div#app的元素下，然后把組件<my-component>編譯成HTML，最終渲染所需要的UI效果。繼續用張圖來描述這個過程，一圖勝過千言萬語嘛。

我們要說的是模板編譯的作用域，在Vue中，組件是有一個作用域的：組件模板（<template>）內的就是組件作用域，而其之外的就不是組件的作用域了，比如上面的示例，my-component組件的作用域就是下面這部分：

通俗地講，在子組件中定義的數據，只能用在子組件的模板。在父組件中定義的數據，只能用在父組件的模板。如果父組件的數據要在子組件中使用，則需要子組件定義props