這些天很久沒更文了,最近又迷上打CF,耽擱了寫文時間(打遊戲真的有癮),仍是勸你們合理安排遊戲時間(反正我是控制不住,哈哈哈)。javascript
哈哈哈,固然有興趣的小夥伴加我wx,來運輸船約一下哦,"北部大區"。html
迴歸正題。前端
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
是JavScript
和XML
結合一種的格式,是JavaScript
的擴展語法。說白了就是能夠在JavaScript
代碼中使用JSX
。JavaScript
在解析JSX
時會先建立虛擬DOM
,JSX
最後會被編譯爲JavaScript
代碼執行。
有的人確定以爲用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>)
}
}
複製代碼
除了寫法不同外,沒什麼不一樣,屬性都是遵循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
文件
{
"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'
]
}
複製代碼
感謝觀看,有問題隨時找我哈,若是有想運輸船約一下的記得私聊我哦,嘿嘿
謝謝你讀完本篇文章,但願對你能有所幫助,若有問題歡迎各位指正。
我是蛙人(✿◡‿◡),若是以爲寫得能夠的話,請點個贊吧❤。
感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論
寫做不易,「點贊」+「在看」+「轉發」 謝謝支持❤
《聊聊什麼是CommonJs和Es Module及它們的區別》
《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》