VUE3 之 render 函式的使用 - 這個系列的教程通俗易懂，適合新手

阿新 • • 發佈：2022-06-01

1. 概述

老話說的好：不用想的太多、太遠，做好當天的事，知道明天要做什麼就可以了。

言歸正傳，今天我們來聊聊 VUE 中 render 函式的使用。

2. render 函式

2.1 一個簡單的例子

<body>
    <div id="myDiv"></div>
</body>
<script>
    
   const app = Vue.createApp({
      
       template:`
            <my-h>
                追風人
             
</my-h>
       `
   });

   app.component('my-h', {
        template:`
            <h1>
                <slot />
            </h1>
        `
   });

   const vm = app.mount("#myDiv");

</script>

這個例子中，我們用到了之前學的子元件和插槽，實現了對主元件中的文字加 h 標籤的功能。

2.2 依據資料，改變 h 標籤

    const app = Vue.createApp({
        
        data() {
             
return {
                myLevel: 2
            }
        },

        template:`
            <my-h :level="myLevel">
                追風人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        template:`
            <h1 v-if="level===1">
                <slot />
            </h1>
            <h2 v-if 
="level===2">
                <slot />
            </h2>
        `
    });

這個例子中，我們希望依據資料 myLevel 的值，改變主元件中文字的 h 標籤，1 對應 h1，2 對應 h2。

2.3 更多的 h 標籤

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 3
            }
        },

        template:`
            <my-h :level="myLevel">
                追風人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        template:`
            <h1 v-if="level===1">
                <slot />
            </h1>
            <h2 v-if="level===2">
                <slot />
            </h2>
            <h3 v-if="level===3">
                <slot />
            </h3>
            <h4 v-if="level===4">
                <slot />
            </h4>
            <h5 v-if="level===5">
                <slot />
            </h5>
        `
    });

我們希望可以有更多的 h 標籤供選擇，但顯然這麼寫，非常的不優雅。

2.4 使用 render 函式簡化程式碼

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 6
            }
        },

        template:`
            <my-h :level="myLevel">
                追風人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        
        render() {
            const { h } = Vue;
            return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default())
        }
    });

這個例子中，我們使用 render 函式代替 template。

const { h } = Vue; 這句是固定寫法。

return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default())

這句中，第一個引數 'h' + this.level 是標籤，第二個引數 {name:"myh", id:"myh"} 是標籤的屬性，第三個引數 this.$slots.default() 是標籤包裹的內容

生成的標籤結果如下：<h6 name="myh" id="myh"> 追風人 </h6>

2.5 render 函式包裹更多的內容

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 1
            }
        },

        template:`
            <my-h :level="myLevel">
                追風人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        
        render() {
            const { h } = Vue;
            return h('h' + this.level, {name:"myh", id:"myh"}, [
                
                this.$slots.default(),
                h('br', {}),
                h('button', {onclick:"alert(123)"}, '按鈕')
            ])
        }
    });