欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年02月09日 08:30:02   作者:奧特曼  
在vue中我們使用模板HTML語法來組建頁面的,使用render函數(shù)我們可以用js語言來構建DOM,這篇文章主要介紹了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的列表之渲染,排序,過濾詳解

    Vue的列表之渲染,排序,過濾詳解

    這篇文章主要為大家詳細介紹了Vue的列表之渲染,排序,過濾,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • 在vue中使用eacharts創(chuàng)建graph關系圖方式

    在vue中使用eacharts創(chuàng)建graph關系圖方式

    這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關系圖方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue-cli3.0 腳手架搭建項目的過程詳解

    vue-cli3.0 腳手架搭建項目的過程詳解

    這篇文章主要介紹了vue-cli3.0 腳手架搭建項目的過程,本文分步驟給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • 一篇文章帶你吃透Vuex3的狀態(tài)管理

    一篇文章帶你吃透Vuex3的狀態(tài)管理

    Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下
    2022-07-07
  • Vue2.0組件間數(shù)據(jù)傳遞示例

    Vue2.0組件間數(shù)據(jù)傳遞示例

    本篇文章主要介紹了Vue2.0組件間數(shù)據(jù)傳遞示例,組件間數(shù)據(jù)傳遞主要是父子組件之間傳遞,具有一定的參考價值,有興趣的可以了解一下。
    2017-03-03
  • vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • vue中@change兼容問題詳解

    vue中@change兼容問題詳解

    這篇文章主要介紹了vue中@change兼容問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • 深入探究Vue中$nextTick的實現(xiàn)原理

    深入探究Vue中$nextTick的實現(xiàn)原理

    這篇文章主要為大家詳細介紹Vue中$nextTick的實現(xiàn)原理,文中的示例代碼講解詳細,對我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下
    2023-06-06
  • vue中Bootstrap的詳細使用方法

    vue中Bootstrap的詳細使用方法

    Bootstrap適用于快速搭建簡單網(wǎng)站或Web應用程序的情況,而Vue.js適用于構建復雜的單頁面應用程序,根據(jù)您的項目需求和開發(fā)方式,您可以選擇使用Bootstrap、Vue.js或兩者結合使用,這篇文章主要介紹了vue使用Bootstrap的詳細方法,需要的朋友可以參考下
    2023-08-08
  • 解決vue?eslint開發(fā)嚴格模式警告錯誤的問題

    解決vue?eslint開發(fā)嚴格模式警告錯誤的問題

    這篇文章主要介紹了解決vue?eslint開發(fā)嚴格模式警告錯誤的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論