Vue.js
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

Vue render函数使用详细讲解

发布时间：2023-03-25 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue render函数使用详细讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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函数内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的Vue render函数使用详细讲解全部内容，希望文章能够帮你解决Vue render函数使用详细讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：Vue render"Vue render函数
猜你在找的Vue.js相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程