什麼場景下使用Render函數,如何配置JSX

前言

這些天很久沒更文了,最近又迷上打CF,耽擱了寫文時間(打遊戲真的有癮),仍是勸你們合理安排遊戲時間(反正我是控制不住,哈哈哈)。javascript

附上一圖

哈哈哈,固然有興趣的小夥伴加我wx,來運輸船約一下哦,"北部大區"。html

迴歸正題。前端

Render函數

render函數是組件渲染的重要核心,它跟template模板開發同樣,只不過這種形式開發,它(render)更接近底層,這樣能讓Vue編譯時少轉換一次。vue

讓咱們來看一下哪裏能用到render函數。java

咱們都知道Vue項目入口文件main.js裏面有個render函數長下面這樣,將項目的App根組件,掛載到根實例上經過render渲染。node

new Vue({
  render: h => h(App)
}).$mount('#app')
複製代碼

咱們來解刨一下render函數身體。webpack

  • render函數返回值是一個VNode -> "virtual node"虛擬節點git

  • render函數的參數是一個createElement函數github

    • createElement返回值也是一個VNode節點
    • createElement函數的參數有三個
      • 第一個 標籤名稱
      • 第二個 屬性值
      • 第三個 標籤子級元素

代碼演示:web

index.js

export default {
    data() {
        return {
            name: '蛙人'
        }
    },
    render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "蛙人"} }, 
            [
                createElement("span", null, "蛙人")
            ]
        )
    }
}
複製代碼

main.js

import config from "./index.js"
Vue.component("test", config)
複製代碼

上面會調用標籤會建立出一個div帶有span子級的內容,注意createElement第二個參數屬性這裏,這裏不能亂寫,必須遵照官網風格點擊這裏

固然這裏確定有人會問,這樣寫有什麼用,跟template寫不同嘛,render函數這樣寫還麻煩可讀性不強。

分狀況,有時候用render更加靈活,咱就拿官網最典型的案例來舉個例子

封裝一個組件,進行傳入數字參數,就顯示數字參數的標籤,你確定會先想到這樣。

<template>
    <div> <h1 v-if="num == 1"></h1> <h2 v-if="num == 2"></h2> <h3 v-if="num == 3"></h3> <h4 v-if="num == 4"></h4> <h5 v-if="num == 5"></h5> <h6 v-if="num == 6"></h6> </div>
</template>
複製代碼

上面這樣實現是沒問題的,可是代碼會冗餘,一堆判斷。咱們再來看一下render函數的實現

<script>
  render: function (createElement) {
    return createElement(
      'h' + this.num,
    )
  },
  props: {
    num: {
      type: Number,
      required: true
    }
  }
</script>
複製代碼

上面兩種都實現了一樣的功能,是否是render函數這種方式看起來要簡潔的多。因此通常用render函數封裝東西是比較靈活的,尤爲是配置和模板分離。深刻理解配置這裏

什麼是JSX

JSXJavScriptXML結合一種的格式,是JavaScript的擴展語法。說白了就是能夠在JavaScript代碼中使用JSXJavaScript在解析JSX時會先建立虛擬DOMJSX最後會被編譯爲JavaScript代碼執行。

爲何要用JSX

有的人確定以爲用render函數寫若是嵌套子級太多層看着太彆扭了,可讀性太差。

export default {
    render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "蛙人"} }, 
            [
                createElement(
                    "span", 
                    null, 
                    "蛙人"
                ),
                createElement(
                    "span", 
                    null, 
                    createElement(
                        "b", 
                        null, 
                        "前端娛樂圈"
                    )
                ),
                createElement(
                    "span", 
                    null, 
                    createElement(
                        "b", 
                        null, 
                        createElement(
                            "i", 
                            null, 
                            "關注前端娛樂圈"
                        )
                    )
                )
            ]
        )
    }
}
複製代碼

好比上面這種,嵌套多層,可讀性太差,時間一長本身還得捋半天。

因此爲了解決這問題,JSX就登場了,JSX至關於就是createElement的語法糖,這種形式能夠直接使用template模板那種格式在render函數裏寫。

咱們用這種形式來還原一下上面的createElement寫的,是否是這種很簡潔易讀。

export default {
    render() {
        return (<div> <span>蛙人</span> <span> <b>前端娛樂圈</b> </span> <span> <b> <i>關注前端娛樂圈</i> </b> </span> </div>)
    }
}
複製代碼

JSX和Render函數有什麼不一樣

除了寫法不同外,沒什麼不一樣,屬性都是遵循Vue文檔上的。

咱們來使用JSX語法,看看怎麼使用,這裏玩過React的同窗估計都會使用。

export default {
	data() {
		return {
			name: "前端娛樂圈",
			dataList: {
				title: "前端娛樂圈",
				href: "www.baidu.com"
			}
		}
	},
    render() {
        return <div onClick={this.xxx} {...{attrs: this.dataList}}>{ this.name }</div>
    }
}
複製代碼

使用

若是你的項目是Webpack搭建,babel@6的狀況

npm i @babel/core @vue/babel-preset-jsx babel-loader
複製代碼

根目錄.babelrc文件

{
	"plugins": ["transform-vue-jsx"]
}
複製代碼

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
複製代碼

若是你的項目是Webpack搭建,babel@7的狀況

npm i @babel/core @vue/babel-preset-jsx babel-loader @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
複製代碼

根目錄.babelrc文件

文檔說明babel7兼容JSX問題

{
	"presets": ["@vue/babel-preset-jsx"]
}
複製代碼

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
複製代碼

若是你的項目是Vue-cli

最新版本的cli是會默認支持JSX語法的,若是你的版本較老請跟上面同樣的配置。

npm i @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
複製代碼

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}
複製代碼

結語

感謝觀看,有問題隨時找我哈,若是有想運輸船約一下的記得私聊我哦,嘿嘿

感謝

謝謝你讀完本篇文章,但願對你能有所幫助,若有問題歡迎各位指正。

我是蛙人(✿◡‿◡),若是以爲寫得能夠的話,請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易,「點贊」+「在看」+「轉發」 謝謝支持❤

往期推薦

《聊聊在Vue項目中使用Decorator裝飾器》

《分享15個Webpack實用的插件!!!》

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《這些工做中用到的JavaScript小技巧你都知道嗎?》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

參考

blog.csdn.net/sansan_7957…

cn.vuejs.org/v2/guide/re…

相關文章
相關標籤/搜索