1、el
提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標。可以是CSS選擇器，也可以是一個HTMLElement實例。
2、
- 因為所有的掛載元素會被Vue生成的DOM替換。因此不推薦掛載Vue實例到
html或者body上。 - 如果在
const vm = new Vue({})中存在這個選項，實例將立即進入編譯過程，否則，需要顯式調用vm.$mount()手動開啟編譯。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app">我是el掛載的內容:小明今年{{age}}歲了</div> </body> <script> const vm= new Vue({ el:'#app', data:{ age:17 }, } </script> </html>
<script> const vm= new Vue({ data:{ age:17 }, }) vm.$mount('#app') </script>
2、template
一個字符串模板作為Vue實例的標識使用。如果el存在，模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。
<script> const vm= new Vue({ el:'#app', data:{ age:17 }, template:'<div>我是template的內容:小明今年{{age}}歲了</div>', }) </script>
如果值以 # 開始，則它將被用作選擇符，並使用匹配元素的 innerHTML 作為模板。
<script type="x-template" id="mb"> <div>我是template的內容:小明今年{{age}}歲了</div> </script> <script> const vm= new Vue({ el:'#app', data:{ age:17 }, template:'#mb', }) </script>
<body> <div id="app"> 我是el掛載的內容:小明今年{{age}}歲了 </div> <template id="mb"> <div>我是template的內容:小明今年{{age}}歲了</div> </template> </body> <script> const vm= new Vue({ el:'#app', data:{ age:17 }, template:'#mb', }) </script>
3、render
Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> 我是el掛載的內容:小明今年{{age}}歲了 </div> </body> <script> const vm= new Vue({ el:'#app', data:{ age:17 }, template:'<div>我是template的內容:小明今年{{age}}歲了</div>', render(h){ return h('div',`我是render的內容:小明今年${this.age}歲了`) } }) </script> </html>
4、總結：
當Vue選項對象中有render渲染函數時，Vue構造函數將直接使用渲染函數渲染DOM樹，當選項對象中沒有render渲染函數時，Vue構造函數首先通過將template模板編譯生成渲染函數，然后再渲染DOM樹，而當Vue選項對象中既沒有render渲染函數，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，並編譯生成渲染函數。
換言之，在進行DOM樹的渲染時，render渲染函數的優先級最高，template次之且需編譯成渲染函數，而掛載點el屬性對應的元素若存在，則在前兩者均不存在時，其outerHTML才會用於編譯與渲染。
優先級：render > template > el