Vuerender函数使用详细讲解
Dom
在浏览器中通过js来操作DOM的操作性能很差，于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。
虚拟DOM并不是真正意义上的DOM，它作为一个轻量级的JavaScript对象，在状态发生变化时，会进行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>到此这篇关于Vue render函数使用详细讲解的文章就介绍到这了,更多相关Vue render函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
