Vue渲染函數 - render 函數

在 Vue.js 中，render 函數是一種 定義組件如何渲染輸出 的方式，允許開發者用 JavaScript 代碼來描述組件的布局和結構。這里詳細介紹 render 函數的特性、用途和用法。

所謂渲染，就是指 如何顯示頁面，顯示成紅色還是綠色？是顯示 div 還是span?

注意：render 函數適用于頁面的渲染，對于一些功能性的實現，比如想通過render函數將字符串轉化為 int 類型等，最好不要放在render函數里。

1. 什么是 render 函數

render 函數是 Vue 組件的一個方法，用于 返回一個虛擬節點（VNode）結構，該結構將被 Vue 轉換為真實的 DOM 元素。

代碼示例：

render(h) {// 如何展示頁面的邏輯
}

• h：這個參數是一個函數，用于創建虛擬節點。通常，開發者將會將它稱為 createElement，但是在 Vue.js 的文檔中通常用字母 h 來表示。

2、頁面展示過程

當 Vue 組件實例化時，render 函數被調用。其返回的虛擬節點描述了頁面需要如何展示。在更新過程中，Vue 只會比較新舊虛擬節點，確認哪些部分需要變更，從而高效地更新 DOM。

3、render 函數的參數

除了常見的 h 參數，render 函數還有一個可選的參數 `context，它包含關于組件的上下文信息，如 props、slots、attrs、scopedSlots 和 listeners 等。

render(h, context) {const { props, slots, attrs, listeners } = context;// 使用 props, slots, attrs, listeners 進行渲染
}

4. 如何使用

下面是一些使用 render 函數的示例。

（1）基本渲染

function render(h) {return h('div', [h('h1', 'Hello, World!'),h('p', 'This is a paragraph.')]);
}

這個示例創建了一個 div，其中包含一個 h1 和一個 p 元素。

（2）傳遞屬性和事件

function render(h) {return h('button', {on: {click: this.handleClick // 綁定事件}}, 'Click Me');
}

在這個示例中，創建了一個按鈕，點擊時會觸發 handleClick 方法。

（3）條件渲染

function render(h) {return h('div', [this.isVisible ? h('p', 'Visible content') : null,h('button', {on: {click: () => { this.isVisible = !this.isVisible; }}}, 'Toggle Visibility')]);
}

這個例子中，按鈕用于切換內容的顯示與隱藏。

5. render 函數的實際使用

render方法的實質就是生成template模板。render函數生成的內容相當于template的內容，所以使用render函數時，只保留邏輯層即可。

在 Vue.js 中，組件可以分為普通組件和函數式組件。函數式組件是 Vue.js 提供的一種輕量級組件，它們沒有內部的實例 (this) 和生命周期鉤子，因此它們的開銷相對較小，并且在渲染性能上通常更有優勢。函數式組件是通過設置 functional: true 選項來聲明的，同時需要定義一個 render 函數一起使用。在后臺管理的項目中，以系統導航菜單為例：

<script>
export default {name: 'MenuItem',functional: true,props: {icon: {type: String,default: ''},title: {type: String,default: ''}},render(h, context) {const { icon, title } = context.propsconst vnodes = []if (icon) {vnodes.push(<svg-icon icon-class={icon}/>)}if (title) {if (title.length > 5) {vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)} else {vnodes.push(<span slot='title'>{(title)}</span>)}}return vnodes}
}
</script>

由于沒有實例開銷和生命周期鉤子，函數式組件的渲染通常更高效，適用于渲染性能要求較高的場景，系統導航菜單就是一個很好的例子。

函數式組件在使用上，與普通組件一般無二：

<template><div><item icon="user" title="用戶管理" /></div>
</template><script>
import Item from './Item'export default {name: 'SidebarItem',components: { Item }
}
</script>

6.View Design 組件中的使用

Vue 項目中經常會結合各種組件渲染頁面，本示例以 View Design 中的 Table組件的 Column 為例，展示 render 函數的使用：

      condTableCol: [// table表格列頭信息{title: '序號',key:'number',align: 'left',width: 80,},{title: "頭像",key: "headImageUrl",width: 225,align: "left",render: (h, params) => {return h("img", {attrs: { src: params.row.headImageUrl},style: {maxWidth: "50px",maxHeight: "40px",verticalAlign: "middle",marginRight: "10px",},});},},{title: "類型",key: "type",sortable: true,render: (h, params) => {if (params.row.type=== "YES") {return h("span", "通過");} else if (params.row.type === "NO") {return h("span", "駁回");}},align: "left",wiBdth: 150,},{title: "操作",key: "action",// width: '200',align: "center",editable: true,render: (h, params) => {return h("div",{style: {padding: "5px 0",},},[h("Button",{props: {type: "text",size: "small",},style: {display: "inline-block",marginRight: "10px",color: "green",},on: {click: (param) => {this.editInfo(params.row);},},},"編輯",),h("Button",{props: {type: "text",size: "small",},style: {display: "inline-block",marginRight: "10px",color: "green",},on: {click: (param) => {this.remove(params.row);},},},"刪除",),],);},},],