這些天好久沒更文了，最近又迷上打CF，耽擱了寫文時間（打遊戲真的有癮），還是勸大家合理安排遊戲時間（反正我是控制不住，哈哈哈）。
附上一圖哈哈哈，當然有興趣的小夥伴加我wx，來「運輸船」約一下哦，"北部大區"。
回歸正題。
Render函數render函數是組件渲染的重要核心，它跟template模板開發一樣，只不過這種形式開發，它(render)更接近底層，這樣能讓Vue編譯時少轉換一次。
讓我們來看一下哪裡能用到render函數。
我們都知道Vue項目入口文件main.js裡面有個render函數長下面這樣，將項目的App根組件，掛載到根實例上通過render渲染。
new Vue({
render: h => h(App)
}).$mount('#app')
我們來解刨一下render函數身體。
render函數返回值是一個VNode -> "virtual node"虛擬節點
render函數的參數是一個createElement函數
createElement返回值也是一個VNode節點「代碼演示：」
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函數封裝東西是比較靈活的，尤其是配置和模板分離。深入理解配置這裡。
什麼是JSXJSX是JavScript和XML結合一種的格式，是JavaScript的擴展語法。說白了就是可以在JavaScript代碼中使用JSX。JavaScript在解析JSX時會先創建虛擬DOM，JSX最後會被編譯為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'
]
}
結語感謝觀看，有問題隨時找我哈，「如果有想運輸船約一下的記得私聊我哦，嘿嘿」