render函數(shù)是什么

　　簡單的說，在vue中我們使用模板HTML語法組建頁面的，使用render函數(shù)我們可以用js語言來構建DOM

　　因為vue是虛擬DOM，所以在拿到template模板時也要轉譯成VNode的函數(shù)，而用render函數(shù)構建DOM，vue就免去了轉譯的過程。

　　當使用render函數(shù)描述虛擬DOM時，vue提供一個函數(shù)，這個函數(shù)是就構建虛擬DOM所需要的工具。官網(wǎng)上給他起了個名字叫createElement。還有約定的簡寫叫h,

　　vm中有一個方法_c,也是這個函數(shù)的別名

　　先看官網(wǎng)對 createElement的介紹

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一個 HTML 標簽字符串，組件選項對象，或者
 // 解析上述任何一種的一個 async 異步函數(shù)，必要參數(shù)。
 'div',

 // {Object}
 // 一個包含模板相關屬性的數(shù)據(jù)對象
 // 這樣，您可以在 template 中使用這些屬性。可選參數(shù)。
 {
  // (詳情見下一節(jié))
 },

 // {String | Array}
 // 子節(jié)點 (VNodes)，由 `createElement()` 構建而成，
 // 或使用字符串來生成“文本節(jié)點”?？蛇x參數(shù)。
 [
  '先寫一些文字',
  createElement('h1', '一則頭條'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

就是說createElement（params1，params2，params3）接受三個參數(shù)，每個參數(shù)的類型官方介紹已經(jīng)說明

好了，開始今天的正文。

本文 GitHub https://github.com/qq44924588... 上已經(jīng)收錄，更多往期高贊文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點復習，希望我們一起有點東西。

我們知道 Vue 模板是非常強大的，基本可以完成我們?nèi)粘ｉ_發(fā)的所有任務。但是，有一些用例，如基于輸入或插槽值創(chuàng)建動態(tài)組件方式， render 函數(shù)會比模板完成的更好也更出色。

用過 React 開發(fā)的人對 render 函數(shù)應該非常熟悉，因為React組件通過 JSX和 render 函數(shù)來構建的。 盡管Vue render 函數(shù)也可以用JSX編寫，但在這里我們使用原生 JS方式，因為這樣，我們可以更輕松地了解Vue組件系統(tǒng)的一些基礎。

值得注意的是，Vue 的模板實際上在編譯時也是會先解析成 render 函數(shù)表示方式。 模板只是在 render 函數(shù)之上提供了一個方便且熟悉的語法糖。 盡管 render 函數(shù)更強大，但 render 函數(shù)可讀性很差，相對用的也比較少了。

創(chuàng)建組件

帶有 render 函數(shù)的組件沒有 template 標記或屬性。 相反，該組件定義了一個了名為 render 的函數(shù)，該函數(shù)接收一個 reateElement(renderElement: String | Component, definition: Object, children: String | Array) 參數(shù)（由于某種原因，通常別名為 h ，歸咎于JSX）并返回使用該函數(shù)創(chuàng)建的元素，其他一切保持不變，來看看事例：

export default {
 data() {
  return {
   isRed: true
  }
 },

 /*
  * <template>
  *  <div :class="{'is-red': isRed}">
  *   <p>這是一個 render 事例</p>
  *  </div>
  * </template>
  */
 // render 中的渲染結果與上面等價
 render(h) {
  return h('div', {
   'class': {
    'is-red': this.isRed
   }
  }, [
   h('p', '這是一個 render 事例')
  ])
 }
}

render 函數(shù)中如何表示指令

Vue 模板具有各種便捷功能，以便向模板添加基本邏輯和綁定功能，如 v-if 、 v-for 、 v-moel 指令等。 在 render 函數(shù)中是無法使用這些指令的。 取而代之的是以純 JS 來實現(xiàn)，對于大多數(shù)指令而言，這也是比較簡單的。

v-if

v-if 用純 JS 實現(xiàn)很簡單，只需圍繞 createElement 調用使用 if(expr) 語句即可。

v-for

v-for 可以使用 for-of ， Array.map ， Array.filter 等的JS方法中的任何一種來實現(xiàn)。我們可以通過非常有趣的方式將它們組合在一起，以實現(xiàn)過濾或狀態(tài)切片，而無需計算屬性。

例如，有以下 Vue 的模板代碼

<template>
 <ul>
  <li v-for="pea of pod">
   
  </li>
 </ul>
</template>

可以用下面的 render 函數(shù)來實現(xiàn)上面的效果：

render(h) {
 return h('ul', this.pod.map(pea => h('li', pea.name)));
}

v-model

我們知道， v-model 只是 bind 屬性與 value 的語法糖，并在觸發(fā) input 事件時設置數(shù)據(jù)屬性。但是，在 render 函數(shù)沒有這樣的簡寫，我們需要自己實現(xiàn)。

假設，在 Vue 中，我們有如下的結構：

<template>
 <input v-model='myBoundProperty'/>
</template>

上面代碼等價于：

<template>
 <input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>

在 render 函數(shù)中可以用下面方式來實現(xiàn)上面的代碼：

render(h) {
 return h('input', {
  domProps: {
   value: this.myBoundProperty
  },
  on: {
   input: e => {
    this.myBoundProperty = e.target.value
   }
  }
 })
}

v-bind

attribute 和 property 這兩種類型的綁定被放在元素定義中，如 arttrs 、 props 和 domProps ( value 和 innerHTML 之類的東西)。

render(h) {
 return h('div', {
  attrs: {
   // <div :id="myCustomId">
   id: this.myCustomId
  },

  props: {
   // <div :someProp="someonePutSomethingHere">
   someProp: this.someonePutSomethingHere
  },

  domProps: {
    // <div :value="somethingElse">
   value: this.somethingElse
  }
 });
}

需要注意的是，對于 class 和 style 的綁定是直接在定義的根進行處理，而不是作為 attrs ， props 或 domProps 處理。

render(h) {
 return h('div', {
  // “類”是JS中的保留關鍵字，因此必須引用它。
  'class': {
   myClass: true,
   theirClass: false
  },

  style: {
   backgroundColor: 'green'
  }
 });
}

v-on

對事件處理程也是直接添加到元素定義中 on 定義

render(h) {
 return h('div', {
  on: {
   click(e) {
    console.log('I got clickeded!')
   }
  }
 });
}

事件的修飾符可以在處理程序內(nèi)部實現(xiàn)：

.stop -> e.stopPropagation()
.prevent -> e.preventDefault()
.self -> if (e.target !== e.currentTarget) return

鍵盤修飾符

.[TARGET_KEY_CODE] -> if (event.keyCode !== TARGET_KEY_CODE) return
.[MODIFIER] -> if (!event.MODIFIERKey) return

特殊屬性

Slots 可以通過 this.$slots 作為 createElement（） 節(jié)點的數(shù)組來訪問插槽。

作用域插槽存儲在 this.$scopedSlots[scope](props：object) 中，作為返回 createElement() 節(jié)點數(shù)組的函數(shù)。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug 。

總結

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

最新評論