render 函式作用

vue渲染函式文件第一遍看的暈暈乎乎的，再看看寫寫終於清晰了。建議配合文件閱讀，本文也是根據文件加上自己的理解。

注：本文程式碼都是在單檔案元件中編寫。程式碼地址

render 函式作用

render 函式 跟 template 一樣都是建立 html 模板的，但是有些場景中用 template 實現起來程式碼冗長繁瑣而且有大量重複，這時候就可以用 render 函式。

官網例子：子元件想要根據父元件傳遞的 level 值（1-6）來決定渲染標籤 h 幾。具體程式碼可以看文件。

render 函式講解

render 函式即渲染函式，它是個函式，它的引數也是個函式——即 createElement，我們重點來說 createElement 引數。

render 函式的返回值（VNode）

VNode（即：虛擬節點），也就是我們要渲染的節點。

render 函式的引數（createElement）

createElement 是 render 函式 的引數，它本身也是個函式，並且有三個引數。

createElement 函式的返回值（VNode）

createElement 函式的返回值是 VNode（即：虛擬節點）。

createElement 函式的引數（三個）

一個 HTML 標籤字串，元件選項物件，或者解析上述任何一種的一個 async 非同步函式。型別：{String | Object | Function}。必需。

一個包含模板相關屬性的資料物件你可以在 template 中使用這些特性。型別：{Object}。可選。

結合程式碼

/**
 * render: 渲染函式
 * 引數: createElement
 * 引數型別: Function
 */
 render: function (createElement) {
  let _this = this['$options'].parent // 我這個是在 .vue 檔案的 components 中寫的，這樣寫才能訪問this
  let _header = _this.$slots.header  // $slots: vue中所有分發插槽，不具名的都在default裡
 
  /**
  * createElement 本身也是一個函式，它有三個引數
  * 返回值: VNode，即虛擬節點
  * 1. 一個 HTML 標籤字串，元件選項物件，或者解析上述任何一種的一個 async 非同步函式。必需引數。{String | Object | Function} - 就是你要渲染的最外層標籤
  * 2. 一個包含模板相關屬性的資料物件你可以在 template 中使用這些特性。可選引數。{Object} - 1中的標籤的屬性
  * 3. 子虛擬節點 (VNodes)，由 `createElement()` 構建而成，也可以使用字串來生成“文字虛擬節點”。可選引數。{String | Array} - 1的子節點，可以用 createElement() 建立，文字節點直接寫就可以
  */
  return createElement(    
   // 1. 要渲染的標籤名稱：第一個引數【必需】   
   'div',// 2. 1中渲染的標籤的屬性，詳情檢視文件：第二個引數【可選】
   {
    style: {
     color: '#333',border: '1px solid #ccc'
    }
   },// 3. 1中渲染的標籤的子元素陣列：第三個引數【可選】
   [
    'text',// 文字節點直接寫就可以
    _this.$slots.default,// 所有不具名插槽，是個陣列
    createElement('div',_header)  // createElement()建立的VNodes
   ]
  )
 }

可以看下控制檯中打印出來的 $slots

下面在通過具體程式碼看下render函式怎麼用

　　例：

    render:(h) => {
              return h('div',{
　　　　　　　　　　　　　　　　　　　//給div繫結value屬性
                props: {
                  value:''
                },　　　　　　　　　　　　　　　　　　　//給div繫結樣式
　　　　　　　　　　　　　　　　　　　style:{
　　　　　　　　　　　　　　　　　　　　　　width:'30px'
　　　　　　　　　　　　　　　　　　　},　
　　　　　　　　　　　　　　　　　　　//給div繫結點選事件　　
                on: {
                  click: () => {
                    console.log('點選事件')
                  }
                },})
            }  

深入 data 物件

　　有一件事要注意：正如在模板語法中，v-bind:class 和 v-bind:style ，會被特別對待一樣，在 VNode 資料物件中，下列屬性名是級別最高的欄位。該物件也允許你繫結普通的 HTML 特性，就像 DOM 屬性一樣，比如 innerHTML (這會取代 v-html 指令)。

{
 // 和`v-bind:class`一樣的 API
 'class': {
 foo: true,bar: false
 },// 和`v-bind:style`一樣的 API
 style: {
 color: 'red',fontSize: '14px'
 },// 正常的 HTML 特性
 attrs: {
 id: 'foo'
 },// 元件 props
 props: {
 myProp: 'bar'
 },// DOM 屬性
 domProps: {
 innerHTML: 'baz'
 },// 事件監聽器基於 `on`
 // 所以不再支援如 `v-on:keyup.enter` 修飾器
 // 需要手動匹配 keyCode。
 on: {
 click: this.clickHandler
 },// 僅對於元件，用於監聽原生事件，而不是元件內部使用
 // `vm.$emit` 觸發的事件。
 nativeOn: {
 click: this.nativeClickHandler
 },// 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
 // 賦值，因為 Vue 已經自動為你進行了同步。
 directives: [
 {
  name: 'my-custom-directive',value: '2',expression: '1 + 1',arg: 'foo',modifiers: {
  bar: true
  }
 }
 ],// Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
 default: props => createElement('span',props.text)
 },// 如果元件是其他元件的子元件，需為插槽指定名稱
 slot: 'name-of-slot',// 其他特殊頂層屬性
 key: 'myKey',ref: 'myRef'
}

總結

到此這篇關於vue 的 render 函式作用詳解的文章就介紹到這了,更多相關vue render 函式作用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！