Virtual Dom
- 什么是
Virtual Dom，Virtual Dom不是真正意义上的DOM，而是一个轻量级的JavaScript对象，当状态发生变化的时候，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。 - 与
DOM操作相比，Virtual Dom基于JavaScript计算，性能高很多。
render函数
render函数通过createElement参数来创建Virtual Dom。
<template>
<div>
<render-component :level="1" title='123'>123</render-component>
<render-component :level="2" title='123'>123</render-component>
<render-component :level="3" title='123'>123</render-component>
<render-component :level="4" title='123'>123</render-component>
<render-component :level="5" title='123'>123</render-component>
</div>
</template>
<script>
var renderComponent = {
props:{
level:{
type:Number,
default:1,
},
title:{
type:String,
default:''
}
},
render(h){
return h(
'h'+this.level,
[
h(
'a',
{
domProps:{
href:'#'+this.title
}
},
this.$slots.default
)
]
)
}
}
export default {
components:{
renderComponent
}
}
</script>
// createElement构成了Vue Virtual Dom 的模板，它有三个参数
createElement(
// {String | Object | Function}
// 可以是一个HTML标签，组件选项，或者一个函数，必须Return上述其中一个
'div',
// {Object} 一个对应属性的数据对象，可选
{
//类名，api与v-class一致
class:{
className:true
},
//样式内容。api与v-class一致
style:{
color:'red'
},
//dom特性
attrs:{
id:'h'
},
//组件props
props:{
myProps:'bar'
},
//DOM属性
domProps:{
innerHTML:'sda'
},
//自定义事件监听器'on'，不支持修饰器，需自行判断
on:{
click:fn
},
//对于组件，用于监听原生事件
nativeOn:{
},
//自定义指令
directives:{
},
// 如果子组件有定义 slot 的名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
},
// {Object | Array} 字节点（VNodes）,可选值
[
createElement(
'p',
{},
[]
)
]
)
约束
在所有组件树中，VNode如果是组件或者含有组件的slot，那么VNode必须是唯一的
<template>
<div>
<div-component></div-component>
</div>
</template>
<script>
var pComponent={
render:(h)=>{
return h('p','text')
}
}
var divComponent = {
render: (h) => {
return h(
'div',
Array.apply(null,{length:2}).map(()=>{
return h(pComponent)
})
)
}
}
export default {
components:{
divComponent
}
}
</script>
