vue中的render函數、h()函數、函數式組件詳解

更新時間：2023年02月09日 08:30:02 作者：奧特曼

在vue中我們使用模板HTML語法來組建頁面的，使用render函數我們可以用js語言來構建DOM，這篇文章主要介紹了vue中的render函數、h（）函數、函數式組件,需要的朋友可以參考下

一、什么是render

官網：用于編程式地創(chuàng)建組件虛擬 DOM 樹的函數。

在我們使用webpack腳手架創(chuàng)建項目時，都能在main.js中看到一個render函數

import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App)
}).$mount('#app')

對于render函數 es6中寫成了箭頭函數

es5寫法：

render: function (createElement) {
    return createElement(App);
}

實際上createElement只是形參用h代表了，h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。這個名字來源于許多虛擬 DOM 實現默認形成的約定。一個更準確的名稱應該是 createVnode()，但當你需要多次使用渲染函數時，一個簡短的名字會更省力。

二、vue中的render

字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作為第一個參數用來創(chuàng)建 VNode。

如果組件是一個函數組件，渲染函數還會接收一個額外的 context 參數，為沒有實例的函數組件提供上下文信息。

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。

h（）函數用法還是比較多的

// 除了類型必填以外，其他的參數都是可選的
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' })
 
// 類與樣式可以像在模板中一樣
// 用數組或對象的形式書寫
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 數組可以同時包含 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 的模板）實際上被編譯成了渲染函數。

export default { 
    render (h) {
        const p = h('p', 'hi')
        return h('div', { class: 'red' }, [p, p])
      }
}

三、函數式組件

函數式組件是一種定義自身沒有任何狀態(tài)的組件的方式。它們很像純函數：接收 props，返回 vnodes。函數式組件在渲染過程中不會創(chuàng)建組件實例 (也就是說，沒有 this)，也不會觸發(fā)常規(guī)的組件生命周期鉤子。

官網函數式組件格式：

當一個組件沒有管理任何狀態(tài)，也沒有監(jiān)聽任何傳遞給它的狀態(tài)，也沒有生命周期方法。實際上，它只是一個接受一些 prop 的函數。在這樣的場景下，我們可以將組件標記為 functional，這意味它無狀態(tài) (沒有響應式數據)，也沒有實例 (沒有 this 上下文)。一個函數式組件就像這樣：

export default Vue.component('render-component', { // 該組件抽成js文件，
  functional: true,
  // 提供第二個參數作為上下文
  render: function (createElement, context) {
    return createElement('h1', '我是函數式子組件')
  }
})

組件需要的一切都是通過 context 參數傳遞，它是一個包括如下字段的對象：

props：提供所有 prop 的對象
children：VNode 子節(jié)點的數組
slots：一個函數，返回了包含所有插槽的對象
scopedSlots：(2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數形式暴露普通插槽。
data：傳遞給組件的整個數據對象，作為 createElement 的第二個參數傳入組件
parent：對父組件的引用
listeners：(2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監(jiān)聽器的對象。這是 data.on 的一個別名。
injections：(2.3.0+) 如果使用了 inject 選項，則該對象包含了應當被注入的 property。

函數式組件可以像普通組件一樣被注冊和使用。如果你將一個函數作為第一個參數傳入 h，它將會被當作一個函數式組件來對待。

補充 h函數使用場景

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函數、h（）函數、函數式組件的文章就介紹到這了,更多相關vue render函數 h（）函數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: