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>