Vue 中render 函數(shù)的作用是什么

本篇文章給大家分享的是有關(guān)Vue 中render 函數(shù)的作用是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

render函數(shù)是什么

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

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

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

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

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

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

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

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

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

好了，開始今天的正文。

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

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

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

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

創(chuàng)建組件

帶有 render 函數(shù)的組件沒有 template 標(biāo)記或?qū)傩浴?相反，該組件定義了一個了名為 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 中的渲染結(jié)果與上面等價
 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 來實(shí)現(xiàn)，對于大多數(shù)指令而言，這也是比較簡單的。

v-if

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

v-for

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

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

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

可以用下面的 render 函數(shù)來實(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è)置數(shù)據(jù)屬性。但是，在 render 函數(shù)沒有這樣的簡寫，我們需要自己實(shí)現(xiàn)。

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

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

上面代碼等價于：

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

在 render 函數(shù)中可以用下面方式來實(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 的綁定是直接在定義的根進(jìn)行處理，而不是作為 attrs ， props 或 domProps 處理。

render(h) {
 return h('div', {
  // “類”是JS中的保留關(guān)鍵字，因此必須引用它。
  '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)部實(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 可以通過 this.$slots 作為 createElement（） 節(jié)點(diǎn)的數(shù)組來訪問插槽。

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

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

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上就是Vue 中render 函數(shù)的作用是什么，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。