vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
一、什么是render
官網(wǎng):用于編程式地創(chuàng)建組件虛擬 DOM 樹的函數(shù)。
在我們使用webpack腳手架創(chuàng)建項目時,都能在main.js中看到一個render函數(shù)
import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app')
對于render函數(shù) es6中寫成了箭頭函數(shù)
es5寫法:
render: function (createElement) { return createElement(App); }
實際上createElement只是形參用h代表了,h()
是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。這個名字來源于許多虛擬 DOM 實現(xiàn)默認形成的約定。一個更準確的名稱應該是 createVnode()
,但當你需要多次使用渲染函數(shù)時,一個簡短的名字會更省力。
二、vue中的render
字符串模板的代替方案,允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個 createElement
方法作為第一個參數(shù)用來創(chuàng)建 VNode
。
如果組件是一個函數(shù)組件,渲染函數(shù)還會接收一個額外的 context
參數(shù),為沒有實例的函數(shù)組件提供上下文信息。
Vue 選項中的 render
函數(shù)若存在,則 Vue 構造函數(shù)不會從 template
選項或通過 el
選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
h()函數(shù)用法還是比較多的
// 除了類型必填以外,其他的參數(shù)都是可選的 h('div') h('div', { id: 'foo' }) // attribute 和 property 都能在 prop 中書寫 // Vue 會自動將它們分配到正確的位置 h('div', { class: 'bar', innerHTML: 'hello' }) // props modifiers such as .prop and .attr can be added // with '.' and `^' prefixes respectively h('div', { '.name': 'some-name', '^width': '100' }) // 類與樣式可以像在模板中一樣 // 用數(shù)組或對象的形式書寫 h('div', { class: [foo, { bar }], style: { color: 'red' } }) // 事件監(jiān)聽器應以 onXxx 的形式書寫 h('div', { onClick: () => {} }) // children 可以是一個字符串 h('div', { id: 'foo' }, 'hello') // 沒有 props 時可以省略不寫 h('div', 'hello') h('div', [h('span', 'hello')]) // children 數(shù)組可以同時包含 vnodes 與字符串 h('div', ['hello', h('span', 'hello')])
得到的 vnode 為如下形式:
const vnode = h('div', { id: 'foo' }, []) vnode.type // 'div' vnode.props // { id: 'foo' } vnode.children // [] vnode.key // null
當然我們常見的template的形式(Vue 的模板)實際上被編譯成了渲染函數(shù)。
export default { render (h) { const p = h('p', 'hi') return h('div', { class: 'red' }, [p, p]) } }
三、函數(shù)式組件
函數(shù)式組件是一種定義自身沒有任何狀態(tài)的組件的方式。它們很像純函數(shù):接收 props,返回 vnodes。函數(shù)式組件在渲染過程中不會創(chuàng)建組件實例 (也就是說,沒有 this
),也不會觸發(fā)常規(guī)的組件生命周期鉤子。
官網(wǎng)函數(shù)式組件格式:
當一個組件沒有管理任何狀態(tài),也沒有監(jiān)聽任何傳遞給它的狀態(tài),也沒有生命周期方法。實際上,它只是一個接受一些 prop 的函數(shù)。在這樣的場景下,我們可以將組件標記為 functional
,這意味它無狀態(tài) (沒有響應式數(shù)據(jù)),也沒有實例 (沒有 this
上下文)。一個函數(shù)式組件就像這樣:
export default Vue.component('render-component', { // 該組件抽成js文件, functional: true, // 提供第二個參數(shù)作為上下文 render: function (createElement, context) { return createElement('h1', '我是函數(shù)式子組件') } })
組件需要的一切都是通過 context
參數(shù)傳遞,它是一個包括如下字段的對象:
- props:提供所有 prop 的對象
- children:VNode 子節(jié)點的數(shù)組
- slots:一個函數(shù),返回了包含所有插槽的對象
- scopedSlots:(2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數(shù)形式暴露普通插槽。
- data:傳遞給組件的整個數(shù)據(jù)對象,作為 createElement 的第二個參數(shù)傳入組件
- parent:對父組件的引用
- listeners:(2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監(jiān)聽器的對象。這是 data.on 的一個別名。
- injections:(2.3.0+) 如果使用了 inject 選項,則該對象包含了應當被注入的 property。
函數(shù)式組件可以像普通組件一樣被注冊和使用。如果你將一個函數(shù)作為第一個參數(shù)傳入 h
,它將會被當作一個函數(shù)式組件來對待。
補充 h函數(shù)使用場景
button.vue
<script> export default { props: { type: { type: String, default: 'normal' }, text: { type: String, default: 'normal' }, size: { type: String, default: 'medium' } }, computed: { tag () { switch (this.type) { case 'success': return 1 case 'danger': return 2 case 'warning': return 3 default: return 1 } } }, render (h) { return h('div', { class: { btn: true, buttom: 'name', 'btn-success': this.type === 'success', 'btn-danger': this.type === 'danger', 'btn-warning': this.type === 'warning', 'btn-mini': this.size === 'mini', 'btn-small': this.size === 'small', 'btn-medium': this.size === 'medium' }, domProps: { innerText: this.text }, on: { click: this.handleClick } }) }, methods: { handleClick () { console.log('button') } } } </script> <style lang="less" scoped> .buttom { padding: 10px 0; margin: 5px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .buttom:hover { background: #c9c9c9; } .btn-success { background: #48ff8b; color: #fff; } .btn-danger { background: #ff4848; color: #fff; } .btn-warning { background: #ffbf48; color: #fff; } .btn-small { width: 120px; height: 20px; } .btn-medium { width: 120px; height: 30px; } .btn-mini { width: 120px; height: 10px; } </style>
使用
<Button type="danger" text="名字" size="mini"></Button> <Button type="warning" text="名字" size="small"></Button> <Button type="success" text="名字" size="mini"></Button> <Button type="danger" text="名字" size="medium"></Button> <Button type="success" text="名字" size="mini"></Button> <Button type="warning" text="名字" size="medium"></Button>
到此這篇關于vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件的文章就介紹到這了,更多相關vue render函數(shù) h()函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在vue中使用eacharts創(chuàng)建graph關系圖方式
這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關系圖方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-01-01