render函數(shù)是什么

　　簡(jiǎn)單的說(shuō)，在vue中我們使用模板HTML語(yǔ)法組建頁(yè)面的，使用render函數(shù)我們可以用js語(yǔ)言來(lái)構(gòu)建DOM

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

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

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

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

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

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

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

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

好了，開(kāi)始今天的正文。

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

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

用過(guò) React 開(kāi)發(fā)的人對(duì) render 函數(shù)應(yīng)該非常熟悉，因?yàn)镽eact組件通過(guò) JSX和 render 函數(shù)來(lái)構(gòu)建的。 盡管Vue render 函數(shù)也可以用JSX編寫(xiě)，但在這里我們使用原生 JS方式，因?yàn)檫@樣，我們可以更輕松地了解Vue組件系統(tǒng)的一些基礎(chǔ)。

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

創(chuàng)建組件

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

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

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

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

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

v-if

v-if 用純 JS 實(shí)現(xiàn)很簡(jiǎn)單，只需圍繞 createElement 調(diào)用使用 if(expr) 語(yǔ)句即可。

v-for

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

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

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

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

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

v-model

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

假設(shè)，在 Vue 中，我們有如下的結(jié)構(gòu)：

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

上面代碼等價(jià)于：

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

在 render 函數(shù)中可以用下面方式來(lái)實(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
  }
 });
}

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

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

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

v-on

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

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

事件的修飾符可以在處理程序內(nèi)部實(shí)現(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 可以通過(guò) this.$slots 作為 createElement（） 節(jié)點(diǎn)的數(shù)組來(lái)訪問(wèn)插槽。

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

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

總結(jié)

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

最新評(píng)論