vue實例屬性之el，template，render--(轉載)

轉載連接：https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html

 

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

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

二、寫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方式渲染。'
  }
})

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

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

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

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

四、獨立構建
獨立構建指可以將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'
  }
}