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