一、el，template，render屬性優先性
當Vue選項對象中有render渲染函數時，Vue構造函數將直接使用渲染函數渲染DOM樹，當選項對象中沒有render渲染函數時，Vue構造函數首先通過將template模板編譯生成渲染函數，然后再渲染DOM樹，而當Vue選項對象中既沒有render渲染函數，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數。
換言之，在進行DOM樹的渲染時，render渲染函數的優先級最高，template次之且需編譯成渲染函數，而掛載點el屬性對應的元素若存在，則在前兩者均不存在時，其outerHTML才會用于編譯與渲染。
1、寫html文件

<div class="vapp-1">{{ info }}</div> <div class="vapp-2">{{ info }}</div> <div class="vapp-3">{{ info }}</div>

2、寫js文件

new Vue({el: '.vapp-1',data: {info: '這是通過el屬性獲取掛載元素的outerHTML方式渲染。'},template: '<div>這是template屬性模板渲染。</div>',render: function(h){return h('div', {}, '這是render屬性方式渲染。')} })new Vue({el: '.vapp-2',data: {info: '這是通過el屬性獲取掛載元素的outerHTML方式渲染。'},template: '<div>這是template屬性模板渲染。</div>' })new Vue({el: '.vapp-3',data: {info: '這是通過el屬性獲取掛載元素的outerHTML方式渲染。'} })

3、查看渲染結果
這是render屬性方式渲染。
這是template屬性模板渲染。
這是通過el屬性獲取掛載元素的outerHTML方式渲染。

二、獨立構建和運行時構建
Vue.js 1.0，編譯器需要依賴瀏覽器的DOM，所以無法將編譯器和運行時分開。因此在Vue.js 1.0分發包中，編譯器和運行時是打包在一起，都在瀏覽器端執行。
Vue.js 2.0，為了支持服務端渲染(server-side rendering)，編譯器不能依賴瀏覽器的DOM，所以必須將編譯器和運行時分開。于是形成了獨立構建（編譯器 + 運行時）和運行時構建（僅運行時）。顯而易見，運行時構建體積要小于獨立構建。

1、模板編譯器
模板編譯器的職責是將模板字符串編譯為純JavaScript的渲染函數，即將<template>編譯成render函數。
2、Vue.js的執行過程
包含編譯過程和運行過程，在編譯過程，編譯器將字符串模板(template)編譯為渲染函數(render)
在運行過程，調用渲染函數。
3、運行時構建
運行時構建指不能進行模板編譯的Vue庫。運行時構建不包含模板編譯器，即不支持template選項，如果使用vue-loader和vueify預編譯模板，只需要打包運行時，而不需要打包編譯器。
運行時構建，可以用render選項，但它只在單文件組件中起作用，因為單文件組件的模板是在構建時預編譯到render函數中，運行時構建只有獨立構建大小的30%，只有16Kb min+gzip大小。

// 不需要編譯器 new Vue({render (h) {return h('div', this.hello)} })

4、獨立構建
獨立構建指能夠將template模板或者從el掛載元素提取的模板編譯成渲染函數的Vue庫，獨立構建包含模板編譯器，可以用template選項實時編譯模板。

// 需要編譯器 new Vue({template: '<div>{{ hello }}</div>' })

使用vue-cli生成項目時，會提醒使用哪種構建方式，npm包默認導出的是運行時構建，即runtime版本vue.runtime.common.js，如果想使用獨立構建，需要在webpack.config.js中配置alias。

resolve: {alias: {vue: 'vue/dist/vue.js'} }

總結

以上是生活随笔為你收集整理的vue实例属性之el，template，render的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。