1.  什麼是Virtual Dom

React與Vue 2 都是使用是Virtual Dom技術，Virtual Dom技術並不是真正的Dom，而是一個輕量級的JavaScript物件，在狀態發生改變的時候，Virtual Dom會進行Diff運算，來更新只需要被替換的Dom，而不是全部重繪。

與傳統的dom相比來說，Virtual Dom是基於JavaScript計算的，所以開銷會很小。

Virtual Dom執行過程如下圖

 用Virtual Dom建立的JavaScript物件一般是這樣的：

var vNode = {
                    tag:'div',

         attributes:{id:'main'},

         childen:[//p節點]

}

createElement用法

createElement構成了一個Vue Virtual Dom的模板，他有三個引數：

第一個引數必選，可以是一個html標籤，也可以是一個元件或者函式。第二個是可選引數，資料物件，再template中使用。第三個是子節點，也是可選引數，用法一致。

<div id="app">
    <ele></ele>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="componentA">
		<div>
			<button @click="dianji">按鈕</button>
		</div>
	</template>
	<script>
		Vue.component('ele',{
			render:function(createElement){
				return createElement(
						'div',
						{
							class:{
								'show':this.show
							},
							attrs:{
								id:'element'
							},
							on:{
								click:this.handleClick
							}
						},
				
						'文字內容'
				)
			},
			data:function(){
				return {
					show:true
				}
			},
			methods:{
				handleClick:function(){
					console.log('clicked');
				}
			}
		})
		
		new Vue({
			el:'#app'
		})
	
	</script>