在vue中使用jsx語法的使用方法
什么是JSX?
JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX，利用HTML語法來創(chuàng)建虛擬DOM。當(dāng)遇到<，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析.
我為什么要在vue中用JSX?
想折騰一下唄,開玩笑.最開始是因?yàn)榻谠趯W(xué)習(xí)react,在里面體驗(yàn)了一把jsx語法,發(fā)現(xiàn)也并沒有別人說的很難受的感覺啊,于是就想嘗試在vue中也試下,廢話不多說,先來用代碼來看下兩者的區(qū)別吧.
ps:vue中大部分場(chǎng)景是不需要用render函數(shù)的,還是用模板更簡(jiǎn)潔直觀.
使用template
// item.vue
<template>
<div>
<h1 v-if="id===1">
<slot></slot>
</h1>
<h2 v-if="id===2">
<slot></slot>
</h2>
<h3 v-if="id===3">
<slot></slot>
</h3>
<h4 v-if="id===4">
<slot></slot>
</h4>
</div>
</template>
<script>
export default {
name: "item",
props:{
id:{
type:Number,
default:1
}
}
}
</script>
item組件中就是接收父組件傳過來的id值來顯示不同的h標(biāo)簽,v-if可以說用到了"極致",而且寫了很多個(gè)冗余的slot
使用render函數(shù)和jsx
// item.vue
<script>
export default {
name: "item",
props:{
id:{
type:Number,
default:1
}
},
render(){
const hText=`
<h${this.id}>${this.$slots.default[0].text}</h${this.id}>
`
return <div domPropsInnerHTML={hText}></div>
}
}
</script>
再加上父組件來控制props的值。父組件不做對(duì)比還用傳統(tǒng)的template格式，
// list.vue
<template>
<div>
<h-title :id="id">Hello World</h-title>
<button @click="next">下一個(gè)</button>
</div>
</template>
<script>
import Title from './item'
export default {
name: "list",
data() {
return {
id:1
}
},
components: {
"h-title":Title
},
methods:{
next(){
++this.id
}
}
}
</script>
運(yùn)行后頁面就渲染出了h1 or h2 or h3標(biāo)簽，同時(shí)slot也只有一個(gè)，點(diǎn)擊切換props的值，也會(huì)顯示不同的h標(biāo)簽。第二種寫法雖然不是很直接，但是省去了很多冗余代碼，頁面一下清爽了很多。
沒了v-if,v-for,v-model怎么辦？
不要著急，這些指令只是黑魔法，用js很容易實(shí)現(xiàn)。
v-if
render(){
return (
<div>
{this.show?'你帥':'你丑'}
</div>
)
}
寫三元表達(dá)式只能寫簡(jiǎn)單的，那么復(fù)雜的還得用if/else
render(){
let ifText
if(this.show){
ifText=<p>你帥</p>
}else{
ifText=<p>你丑</p>
}
return (
<div>
{ifText}
</div>
)
}
v-for
data(){
return{
show:false,
list:[1,2,3,4]
}
},
render(){
return (
<div>
{this.list.map((v)=>{
return <p>{v}</p>
})}
</div>
)
}
在jsx中｛｝中間是沒辦法寫if/for語句的只能寫表達(dá)式，所以就用map來當(dāng)循環(huán)，用三元表達(dá)式來當(dāng)判斷了
v-model
最近在幫公司面試招人發(fā)現(xiàn)v-model很多人都不知道語法糖是什么？然后有些人說我可以用原生js實(shí)現(xiàn)，但是他們竟然不知道在vue中怎么實(shí)現(xiàn)，好吧，兩個(gè)點(diǎn)：傳值和監(jiān)聽事件改變值。
<script>
export default {
name: "item",
data(){
return{
show:false,
list:[1,2,3,4],
text:'',
}
},
methods:{
input(e){
this.text=e.target.value
}
},
render(){
return (
<div>
<input type="text" value={this.text} onInput={this.input}/>
<p>{this.text}</p>
</div>
)
}
}
</script>
怎么用自定義組件？
很簡(jiǎn)單，只需要導(dǎo)入進(jìn)來，不用再在components屬性聲明了，直接寫在jsx中比如
<script>
import HelloWolrd from './HelloWorld'
export default {
name: "item",
render(){
return (
<HelloWolrd/>
)
}
}
</script>
事件，class,style,ref等等怎么綁定？
來看下面的寫法
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
上面有個(gè)地方需要注意，當(dāng)給自定義組件綁定事件時(shí)用nativeOnClick,而模板格式是用
@click.native，另外當(dāng)用到給函數(shù)式組件綁定事件時(shí)就有點(diǎn)小坑了下面說。
JSX中的函數(shù)式組件
函數(shù)式組件無狀態(tài)，無this實(shí)例，下面是vue文檔中提到的一段話：
因?yàn)楹瘮?shù)式組件只是一個(gè)函數(shù)，所以渲染開銷也低很多。然而，對(duì)持久化實(shí)例的缺乏也意味著函數(shù)式組件不會(huì)出現(xiàn)在 Vue devtools 的組件樹里。
我個(gè)人理解因?yàn)闆]了狀態(tài)(data)，少了很多響應(yīng)式的處理，還有生命周期等過程會(huì)提高速度和減少內(nèi)存占用吧？
函數(shù)式組件也可以在模板格式中用只需要這樣
<template functional> </template>
那jsx中的函數(shù)式組件呢？也很簡(jiǎn)單只需增加配置functional: true就可以了
那函數(shù)式組件沒有了this 實(shí)例怎么綁定事件怎么獲取props呢？
組件需要的一切都是通過上下文傳遞，包括：
- props : 提供所有 prop 的對(duì)象
- children: VNode 子節(jié)點(diǎn)的數(shù)組
- slots: 返回所有插槽的對(duì)象的函數(shù)
- data：傳遞給組件的數(shù)據(jù)對(duì)象，并將這個(gè)組件作為第二個(gè)參數(shù)傳入 createElement
上面我只列舉了部分屬性，這些是非函數(shù)式組件的東西，對(duì)于函數(shù)式組件
vue 增加了context對(duì)象，需要作為render(h,context) 第二個(gè)參數(shù)傳入，this.$slots.default更新為context.children props原本是直接掛在this上的，現(xiàn)在變?yōu)閏ontext.props掛在了context.props上。this.data變?yōu)榱薱ontext.data
需要注意的是對(duì)于函數(shù)式組件，沒有被定義為prop的特性不會(huì)自動(dòng)添加到組件的根元素上,意思就是需要我們手動(dòng)添加到組件根元素了，看個(gè)例子吧
//父組件
...省略無關(guān)代碼
render(){
return (
<Item data={this.data} class="large"/>
)
}
//Item.vue組件
export default {
functional:true,
name: "item",
render(h,context){
return (
<div class="red" >
{context.props.data}
</div>
)
}
}
上面代碼期待的是.large類名傳入到了Item的根元素上，但是其實(shí)沒有。我們需要增加點(diǎn)東西
// Item.vue
export default {
functional:true,
name: "item",
render(h,context){
return (
<div class="red" {...context.data}>
{context.props.data}
</div>
)
}
}
注意到，通過展開運(yùn)算符把所有的屬性添加到了根元素上，這個(gè)context.data就是你在父組件給子組件增加的屬性，他會(huì)跟你在子元素根元素的屬性智能合并，現(xiàn)在.large類名就傳進(jìn)來了。這個(gè)很有用，當(dāng)你在父組件給子組件綁定事件時(shí)就需要這個(gè)了。下面說一個(gè)關(guān)于綁定事件的小坑
向 createElement 通過傳入 context.data 作為第二個(gè)參數(shù)，我們就把 my-functional-button 上面所有的特性和事件監(jiān)聽器都傳遞下去了。事實(shí)上這是非常透明的，那些事件甚至并不要求 .native 修飾符
上面是vue官網(wǎng)的一段話，然而我看了一遍就忽略了一句很重要的話，就是最后一句，他說不需要.native修飾符了？好先看代碼
// 父組件
methods:{
show(){
alert('你好')
}
},
render(){
return (
<Item data={this.data} onNativeClick={this.show} class="large"/>
)
}
上面代碼乍一看沒毛病，自定義組件用onNativeClick嘛，結(jié)果就是不會(huì)彈窗。唉，最后讀了幾遍剛才vue文檔中的解釋，才發(fā)現(xiàn)原來函數(shù)式組件不需要.native修飾符，對(duì)于template格式肯定一下就反應(yīng)過來了，但是jsx的話，好吧，把上面的onNativeClick重新改為onClick就好了。
現(xiàn)有項(xiàng)目哪些功能可以用jsx代替呢？
這個(gè)其實(shí)跟最開始我例舉的例子很像。我在項(xiàng)目中用它來干掉了滿屏的v-if/v-else
由于我的業(yè)務(wù)是pad上的，需求是一套試卷有幾十道題目，要求一屏只顯示一道題目，點(diǎn)擊下一題顯示下一個(gè)題，思路也比較簡(jiǎn)單：
- 用一個(gè)num變量表示當(dāng)前正在展示的題目索引
- 每次點(diǎn)擊下一題按鈕時(shí)num++
- 用v-if來判斷 num===1，num===2這樣來決定展示哪個(gè)。
這一寫，模板里面好多啊，由于我們的題目每道題的模板可能都不一樣，所以沒辦法循環(huán)，只能手寫全部。之前考慮過用動(dòng)態(tài)組件來切換，但是放棄了，因?yàn)闆]有if直觀啊。
下面看怎么用jsx優(yōu)化一下
//父組件
export default {
name: "list",
data() {
return {
data:'我是函數(shù)式組件',
id:1,
tests:{
1:<div><span>第一道題</span></div>,
2:<div><section>第二道題</section></div>,
3:<div><p>第三道題</p></div>
}
}
},
methods:{
next(){
++this.id
}
},
render(){
return (
<div>
<Item data={this.tests[this.id]} class="large"/>
<button onClick={this.next}>下一題</button>
</div>
)
}
}
上面每道題目的結(jié)構(gòu)都不一致
//子組件,只接受數(shù)據(jù)展示，用函數(shù)式組件
<script>
export default {
functional:true,
name: "item",
render(h,context){
return (
<div class="red" {...context.data}>
{context.props.data}
</div>
)
}
}
</script>
上面沒有用任何if/else判斷就完成了功能，這里用jsx我覺得比較合適，不知道各位大佬有什么其他思路？
最后
總結(jié)一下吧，我們平時(shí)開發(fā)還是多用temlate因?yàn)橹庇^簡(jiǎn)潔，各種指令用著很方便，等你覺得用template寫出的代碼看著很冗余，或者想自己控制渲染邏輯比如循環(huán)，判斷等等時(shí)可以考慮用JSX。另外推薦大家多用函數(shù)式組件提高性能。
第一次寫文章，希望各位花時(shí)間看了的大佬覺得哪個(gè)說的不太嚴(yán)謹(jǐn)還需多多包涵，提出意見我都接受。
參考資料
vue 渲染函數(shù)&jsx
babel-plugin-transform-vue-jsx
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解，需要的朋友們可以學(xué)習(xí)下。2020-03-03
使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼
前段時(shí)間看抖音，有人用時(shí)間輪盤作為動(dòng)態(tài)的桌面壁紙，一時(shí)間成為全網(wǎng)最火的電腦屏保，后來小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤】，有點(diǎn)像五行八卦，感覺很好玩，于是突發(fā)奇想，自己寫一個(gè)網(wǎng)頁版小DEMO玩玩,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue實(shí)戰(zhàn)之購物車詳情頁面的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題
這篇文章主要介紹了vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了詳解Vue如何支持JSX語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vant如何修改placeholder樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說就是使用配置文件來管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作
這篇文章主要介紹了ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程
自定義指令是對(duì)普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的相關(guān)資料,需要的朋友可以參考下2023-02-02