Dom
在浏览器中通过js来操作DOM的操作性能很差,于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。
虚拟DOM并不是真正意义上的DOM,它作为一个轻量级的JavaScript对象,在状态发生变化时,会进行Diff运算,来更新发生变化的DOM,对于未发生变化的DOM节点,不予操作,由于不是全部重绘,大大提高更新渲染性能。
虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法来对比两个新旧两个虚拟 DOM 树之间的差异,实现局部更新,最终把差异更新到真实 DOM
什么是render函数
在vue中我们使用模板HTML语法组建页面,通过render函数用js语言来构建DOM。
因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。
render函数构建DOM需要用到vue提供的工具createElement函数,约定简写h。
render 函数的返回值(VNode)
VNode(即:虚拟节点),也就是我们要渲染的节点。
template与render
Template适合逻辑简单,render适合复杂逻辑。render的性能较高,template性能较低。
当存在template与render时,优先展示template(render不展示)
<template>
<div>gggg</div>
</template>
...
render() {
return <div>我收到的</div>;
}
简单的render函数
render:(h) => {
return h('div',{
//给div绑定value属性
props: {
value:''
},
//给div绑定样式
staticStyle:{
width:'30px'
},
//给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}
ts-vue的写法
render() {
return this.$createElement('div', {
on: {
...this.$listeners,
click: event => {
console.log(event);
},
},
props: this.props || {value:''},
attrs: {
businessId: this.field.pkId,
},
style: {
width:'30px'
}
});
}
render() {
return (
<thead>
<tr class="ant-table-thead--extra">
{this.title}
</tr>
{this.$slots.default}
</thead>
);
}
循环构建:
render() {
return (
<ACheckboxGroup
class="checkbox-list"
value={this.value.map(item => item.id)}
>
{this.dataList.map(item => (
<ACheckbox
key={item.id}
checked={this.checked(item)}
value={item.id}
onChange={$event => this.handleChange($event, item)}
>
{item.name}
</ACheckbox>
))}
</ACheckboxGroup>
);
}
分开定义引用:
render() {
const triggerAction = (
<div class="button-list-content--item">
<span>{this.$t(TriggerActionNameEnum[this.value.triggerAction])}</span>
</div>
);
const formName = (
<div class="button-list-content--item">
<span>{this.value?.triggerData?.formName || ''}</span>
</div>
);
const updateFields = (
<div class="button-list-content--item">
<span class="button-list-content--field" title={this.updateFieldName}>
{this.updateFieldName}
</span>
</div>
);
return this.value.triggerAction === TriggerActionEnum.UPDATE ? (
<div>
{triggerAction}
{updateFields}
</div>
) : (
<div>
{triggerAction}
{formName}
</div>
);
}
动态绑定
render() {
const { setting } = this.data;
return (
<div class={this.$style.item}>
<FormCardStyle silhouette={true} type={setting.template} />
</div>
);
}
什么时候使用Render
自定义组件的时候。
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component()
class Wrap extends Vue {
render() {
return <div>自定义组件A</div>
}
}
@Component()
export default class FormTableActionBar extends Vue {
...
render() {
return (
<div>
<p>下面是自定义组件A</p>
<Wrap></Wrap>
</div>
)
}
}
</script>