Vue Render函数与Virtual Dom

ゝ一世哀愁。 2021-09-27 15:26 357阅读 0赞

### 1.  什么是Virtual Dom ###

React与Vue 2 都是使用是Virtual Dom技术，Virtual Dom技术并不是真正的Dom，而是一个轻量级的JavaScript对象，在状态发生改变的时候，Virtual Dom会进行Diff运算，来更新只需要被替换的Dom，而不是全部重绘。

与传统的dom相比来说，Virtual Dom是基于JavaScript计算的，所以开销会很小。

Virtual Dom运行过程如下图

![70][]

用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>

[70]: /images/20210923/1fdc2635c25043e384d57ff0833651a1.png