Vue中的render函數(shù)render: h => h(App)

dendoink 發(fā)布于2019-08-22 16:18 / 2719人閱讀

摘要：在學(xué)習(xí)時(shí)，使用創(chuàng)建了一個(gè)項(xiàng)目，文件中有一行經(jīng)典代碼，那她是什么意思呢文件內(nèi)容接下來(lái)就是答案嘍等價(jià)于等價(jià)于即上一個(gè)示例提供一個(gè)在頁(yè)面上已經(jīng)存在的元素作為實(shí)例掛載目標(biāo)有這么幾個(gè)重要的參數(shù)第一個(gè)參數(shù)必須一個(gè)標(biāo)簽字符組件選項(xiàng)對(duì)象一個(gè)返回標(biāo)簽

在學(xué)習(xí)Vue.js時(shí)，使用vue-cli創(chuàng)建了一個(gè)Vue項(xiàng)目，main.js文件中有一行經(jīng)典代碼 render: h => h(App)，那她是什么意思呢？

main.js 文件內(nèi)容

   import Vue from "vue"
    import App from "./App.vue"
    new Vue({
      el: "#app",
      render: h => h(App)
    })

接下來(lái)就是答案嘍

{
    render: h => h(App);
}

等價(jià)于

{
    render: h => {
        return h(App);
    }
}

等價(jià)于

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

即：

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

上一個(gè)示例




    
    Document

createElement 有這么幾個(gè)重要的參數(shù)

第一個(gè)參數(shù)(必須) - {String | Object | Function}




    
    render

第二個(gè)參數(shù)(可選) - {Object}




    
    render

第三個(gè)參數(shù)(可選) - {String | Array}




    
    render

兩種組件寫法對(duì)比




    
    render

this.$slots用法




    
    render
    


    
        
            About Me
            Here"s some page content
            Copyright 2016 Evan You
            If I have some content down here

使用props傳遞數(shù)據(jù)




    
    render

VNodes必須唯一




    
    render

v-model指令




    
    render
    


    
        
        你的名字是{{name}}

作用域插槽




    
    render

向子組件中傳遞作用域插槽




    
    render

函數(shù)化組件




    
    render

GPU云服務(wù)器云服務(wù)器 Rendering Renderer render render 流程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94230.html

相關(guān)文章

render: h => h(App) 是什么意思？

摘要：將作為的別名是生態(tài)系統(tǒng)中的一個(gè)通用慣例，實(shí)際上也是所要求的，如果在作用域中失去作用，在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。背景在學(xué)習(xí)時(shí)，使用創(chuàng)建了一個(gè)項(xiàng)目，文件中有一行代碼不知道是什么意思。將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個(gè)通用慣例，實(shí)際上也是 JSX 所要求的，如果在作用域中 h 失去作用，在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。背景在學(xué)習(xí)Vue.js時(shí)，使用vue-cli創(chuàng)...

Java_oldboy 2019-08-22 15:36 評(píng)論0 收藏0
webpack -> vue Component 從入門到放棄（四）

摘要：先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋，在中不能寫注釋插件加載器預(yù)編譯語(yǔ)法跨平臺(tái)環(huán)境用來(lái)設(shè)置命令行安裝預(yù)編譯語(yǔ)法的配置中的對(duì)象，用于處理目錄的對(duì)象，提高開發(fā)效率。 Foreword 之前三篇大致介紹了webpack的用法，正如這個(gè)系列標(biāo)題而言從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對(duì)應(yīng)該說(shuō)是結(jié)合...

z2xy 2019-08-20 15:07 評(píng)論0 收藏0
webpack -> vue Component 從入門到放棄（四）

摘要：先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋，在中不能寫注釋插件加載器預(yù)編譯語(yǔ)法跨平臺(tái)環(huán)境用來(lái)設(shè)置命令行安裝預(yù)編譯語(yǔ)法的配置中的對(duì)象，用于處理目錄的對(duì)象，提高開發(fā)效率。 Foreword 之前三篇大致介紹了webpack的用法，正如這個(gè)系列標(biāo)題而言從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對(duì)應(yīng)該說(shuō)是結(jié)合...

MycLambert 2019-08-01 16:32 評(píng)論0 收藏0
vue項(xiàng)目中main.js使用方法詳解

　　我們都知道初始化vue實(shí)例就是main.js，并且它還需要插件，現(xiàn)在我們就討論下main.js使用方法：　　第一部分：main.js文件解析　　src/main.js是入口文件，它主要是用于是初始化vue實(shí)例，且還需插件，在main.js文件中定義了一個(gè)vue對(duì)象,其中el為實(shí)例提供掛載元素：　　　//基礎(chǔ)配置　　importVuefrom'vue' 　　importAppf...

3403771864 2022-09-28 23:24 評(píng)論0 收藏0
匯總在vue中寫jsx的方式

　　學(xué)習(xí)就是在不斷的總結(jié)，我們今天說(shuō)的就是匯總在vue中寫jsx的方式。　　版本　　本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代碼github倉(cāng)庫(kù)地址　　render函數(shù)　　render函數(shù)和vue中的template是互斥的，template最終是要編譯成virtual Dom的，但我們要知道render函數(shù)可以更直接構(gòu)建virtual Dom； virtual ...

3403771864 2022-10-10 22:08 評(píng)論0 收藏0