淺析Vue 中的 render 函數
render函數是什么
簡單的說，在vue中我們使用模板HTML語法組建頁面的，使用render函數我們可以用js語言來構建DOM
因為vue是虛擬DOM，所以在拿到template模板時也要轉譯成VNode的函數，而用render函數構建DOM，vue就免去了轉譯的過程。
當使用render函數描述虛擬DOM時，vue提供一個函數，這個函數是就構建虛擬DOM所需要的工具。官網上給他起了個名字叫createElement。還有約定的簡寫叫h,
vm中有一個方法_c,也是這個函數的別名
先看官網對 createElement的介紹
// @returns {VNode}createElement( // {String | Object | Function} // 一個 HTML 標簽字符串，組件選項對象，或者 // 解析上述任何一種的一個 async 異步函數，必要參數。 ’div’, // {Object} // 一個包含模板相關屬性的數據對象 // 這樣，您可以在 template 中使用這些屬性。可選參數。 { // (詳情見下一節) }, // {String | Array} // 子節點 (VNodes)，由 `createElement()` 構建而成， // 或使用字符串來生成“文本節點”。可選參數。 [ ’先寫一些文字’, createElement(’h1’, ’一則頭條’), createElement(MyComponent, { props: { someProp: ’foobar’ } }) ])
就是說createElement（params1，params2，params3）接受三個參數，每個參數的類型官方介紹已經說明
好了，開始今天的正文。
本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點復習，希望我們一起有點東西。
我們知道 Vue 模板是非常強大的，基本可以完成我們日常開發的所有任務。但是，有一些用例，如基于輸入或插槽值創建動態組件方式， render 函數會比模板完成的更好也更出色。
用過 React 開發的人對 render 函數應該非常熟悉，因為React組件通過 JSX和 render 函數來構建的。 盡管Vue render 函數也可以用JSX編寫，但在這里我們使用原生 JS方式，因為這樣，我們可以更輕松地了解Vue組件系統的一些基礎。
值得注意的是，Vue 的模板實際上在編譯時也是會先解析成 render 函數表示方式。 模板只是在 render 函數之上提供了一個方便且熟悉的語法糖。 盡管 render 函數更強大，但 render 函數可讀性很差，相對用的也比較少了。
創建組件
帶有 render 函數的組件沒有 template 標記或屬性。 相反，該組件定義了一個了名為 render 的函數，該函數接收一個 reateElement(renderElement: String | Component, definition: Object, children: String | Array) 參數（由于某種原因，通常別名為 h ，歸咎于JSX）并返回使用該函數創建的元素，其他一切保持不變，來看看事例：
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 函數中如何表示指令
Vue 模板具有各種便捷功能，以便向模板添加基本邏輯和綁定功能，如 v-if 、 v-for 、 v-moel 指令等。 在 render 函數中是無法使用這些指令的。 取而代之的是以純 JS 來實現，對于大多數指令而言，這也是比較簡單的。
v-if
v-if 用純 JS 實現很簡單，只需圍繞 createElement 調用使用 if(expr) 語句即可。
v-for
v-for 可以使用 for-of ， Array.map ， Array.filter 等的JS方法中的任何一種來實現。我們可以通過非常有趣的方式將它們組合在一起，以實現過濾或狀態切片，而無需計算屬性。
例如，有以下 Vue 的模板代碼
<template> <ul> <li v-for='pea of pod'> </li> </ul></template>
可以用下面的 render 函數來實現上面的效果：
render(h) { return h(’ul’, this.pod.map(pea => h(’li’, pea.name)));}
v-model
我們知道， v-model 只是 bind 屬性與 value 的語法糖，并在觸發 input 事件時設置數據屬性。但是，在 render 函數沒有這樣的簡寫，我們需要自己實現。
假設，在 Vue 中，我們有如下的結構：
<template> <input v-model=’myBoundProperty’/></template>
上面代碼等價于：
<template> <input :value='myBoundProperty' @input='myBoundProperty = $event.target.value'/></template>
在 render 函數中可以用下面方式來實現上面的代碼：
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!’) } } });}
事件的修飾符可以在處理程序內部實現：
.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（） 節點的數組來訪問插槽。
作用域插槽存儲在 this.$scopedSlots[scope](props：object) 中，作為返回 createElement() 節點數組的函數。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug 。
總結
到此這篇關于淺析Vue 中的 render 函數的文章就介紹到這了,更多相關Vue render 函數內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備