compile介紹

vue compile()是先建立要重新渲染的內容，我們可以透過觸發事件來決定什麼時候做渲染，適合在mounted()處理。

基本用法

<div id="app">
  <h1>{{ message }}</h1>
</div>

let msg = Vue.compile('<input type="text" v-model="text" />')

let app = new Vue({
  el: '#app',
  data: {
    message: 'hello',
    text: 'hi render'
  },
  render: msg.render,
  staticRenderFns: msg.staticRenderFns
})

原本Vue Instance渲染了<h1>hello</h1>在頁面上，Vue.compile先設定好要重新渲染的東西後，用render，將目前Vue Instance的內容更換，重新渲染後的頁面上會顯示文字框且值是hi render文字。

compile的template跟instance和component 一點關係都沒有，只有需要更換template時，透過render去做更換。

Codepen

什麼是render()?

render可帶一個參數createElement function，通常是用h來表示任一個標籤，可自行定義放數個標籤。

e.g. div底層放p標籤，文字放text

render(h){
  return h('div', h('p', 'text'))
}

• Instance/component原本已經渲染在頁面上的資料，想要透過Vue.compile()重新渲染內容的情形下，就會使用到render()。

• 當想重新渲染的內容多又複雜，可用render()達到減少寫重複的template內容，也可以自行定義要放什麼元素。

適合運用的場景?

如Instance要重新渲染內容時，就適合用Vue.compile()，只要事先設定好要重新渲染的內容，在觸發事件/執行function時可以直接更換渲染的內容。

Resource
Vue 中的compile操作方式
Vue-compile