快捷導(dǎo)航

Vue render函數(shù)使用詳細(xì)講解

更新時間：2023年01月17日 15:12:09 作者：AI3D_WebEngineer

vue中的render函數(shù),它返回的是一個虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Dom

在瀏覽器中通過js來操作DOM的操作性能很差，于是虛擬Dom應(yīng)運(yùn)而生。虛擬Dom就是在js中模擬DOM對象樹來優(yōu)化DOM操作的一種技術(shù)或思路。

虛擬DOM并不是真正意義上的DOM，它作為一個輕量級的JavaScript對象，在狀態(tài)發(fā)生變化時，會進(jìn)行Diff運(yùn)算，來更新發(fā)生變化的DOM，對于未發(fā)生變化的DOM節(jié)點(diǎn)，不予操作，由于不是全部重繪，大大提高更新渲染性能。

什么是render函數(shù)

在vue中我們使用模板HTML語法組建頁面，通過render函數(shù)用js語言來構(gòu)建DOM。

因?yàn)関ue是虛擬DOM，所以在拿到template模板時也要轉(zhuǎn)譯成VNode的函數(shù)，而用render函數(shù)構(gòu)建DOM，vue就免去了轉(zhuǎn)譯的過程。

render函數(shù)構(gòu)建DOM需要用到vue提供的工具createElement函數(shù)，約定簡寫h。

render函數(shù)的返回值（VNode）

VNode（即：虛擬節(jié)點(diǎn)），也就是我們要渲染的節(jié)點(diǎn)。

template與render

Template適合邏輯簡單，render適合復(fù)雜邏輯。render的性能較高，template性能較低。

當(dāng)存在template與render時，優(yōu)先展示template（render不展示）

<template>
  <div>gggg</div>
</template>
...
render() {
    return <div>我收到的</div>;
}

簡單的render函數(shù)

render:(h) => {
    return h('div',{
    　　//給div綁定value屬性
        props: {
            value:''
        },
        //給div綁定樣式
        staticStyle:{
            width:'30px'
        },　
        //給div綁定點(diǎn)擊事件　　
        on: {
            click: () => {
                console.log('點(diǎn)擊事件')
            }
        },
    })
}

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>
    );
  }

循環(huán)構(gòu)建：

 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>
    );
  }

動態(tài)綁定

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>

到此這篇關(guān)于Vue render函數(shù)使用詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue render函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: