Vue Render函数与Virtual Dom

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>