目錄

• 1. Vue3 中 JSX 的基本應(yīng)用
• 1.1 在 .vue 文件中使用 jsx
• 1.2 .jsx文件格式
• 2. JSX 和 template 的區(qū)別
• 2.1 插值
• 2.2 自定義組件
• 2.3 屬性和事件
• 2.4 條件和循環(huán) 
• 3. JSX 和 slot （體會(huì) JSX 的優(yōu)越性）
• 總結(jié) 

1. Vue3 中 JSX 的基本應(yīng)用

• 使用 .jsx 格式文件和 defineComponent
• defineComponent 可傳入 setup 函數(shù) 或 組件的配置
• 插值使用單括號(hào) {}

1.1 在 .vue 文件中使用 jsx

// 父
 
<template>
  <div>
    <JSXDemo1 />
  </div>
</template>
 
<script>
import JSXDemo1 from "@/components/JSXDemo1.vue"
export default {
  name: "HomeView",
  components: {
    JSXDemo1
  }
}
</script>
 
// JSXDemo1.vue
 
<script>
import { ref } from "vue"
export default {
  setup () {
    const countRef = ref(200)
 
    const render = () => {
      return <p>DEMO1--{countRef.value}</p> // jsx就是js語(yǔ)法，所以要加 .value
    }
    return render
  }
}
</script>

1.2 .jsx文件格式

// 父組件
 
import { defineComponent, ref } from "vue"
import JSXChild from "./JSXChild.jsx"
 
export default defineComponent(() => { // 傳入 setup 函數(shù)
  const countRef = ref(300)
 
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100}></JSXChild>
    </>
  }
  return render 
})
 
// 子組件 JSXChild.jsx
 
import { defineComponent } from "vue"
 
export default defineComponent({ // 傳入組件配置
  props: ["a"],
  setup (props) {
    const render = () => {
      return <>
<p>child {props.a}</p>
      </>
    }
    return render
  }
})

2. JSX 和 template 的區(qū)別

• 語(yǔ)法上有很大區(qū)別：
• JSX 本質(zhì)就是 js 代碼，可以使用 js 的任何能力
• template 只能嵌入簡(jiǎn)單的 js 表達(dá)式，其他需要指令，如 v-if
• JSX 已經(jīng)成為 ES 規(guī)范，template 還是 Vue 自家規(guī)范
• 本質(zhì)是相同的：
• 都會(huì)被編譯為 js 代碼（render 函數(shù)）

2.1 插值

• template 使用雙括號(hào) {{ }}
• jsx 使用單括號(hào) { }

// template
 
<template>
  <p>{{ name }} -- {{ age }}</p>
</template>
 
// jsx
 
const render = () => {
    return <>
<p>child {props.a}</p>
    </>
}

2.2 自定義組件

• template 組件名使用時(shí)可改變大小寫或是駝峰，jsx 不可更改
• 引入動(dòng)態(tài)參數(shù)，template使用冒號(hào)+參數(shù)名（:msg='msg'）,jsx 不需要冒號(hào)

// template
 
<template>
  <div>
    <watch-effect :msg="msgRef"/>
  </div>
</template>
 
<script>
import { ref } from "vue"
import WatchEffect from "@/components/WatchEffect.vue"
export default {
  name: "HomeView",
  components: {
    WatchEffect,
  },
  setup () {
    const msgRef = ref("123")
    return {
msgRef
    }
  }
}
</script>
 
// jsx 組件名稱不可變，要和引入名字保持一致
 
import { defineComponent, ref } from "vue"
import JSXChild from "./JSXChild.jsx"
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100}></JSXChild>
    </>
  }
  return render
})

2.3 屬性和事件

template 區(qū)分屬性和事件的寫法，jsx 不區(qū)分

// jsx 屬性和事件的寫法一樣
 
import { defineComponent, ref } from "vue"
import JSXChild from "./JSXChild.jsx"
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  function onChange () {
    console.log("onChange")
  }
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100} change={onChange}></JSXChild>
    </>
  }
  return render
})

2.4 條件和循環(huán) 

條件 template 使用 v-if 指令，jsx 在表達(dá)式中使用 && （類似 if( a && b)）

// template v-if
 
<template>
  <p v-if="flagRef">template demo</p>
  <button @click="changeFlagRef">click</button>
</template>
<script>
import { ref } from "vue"
export default {
  setup () {
    const flagRef = ref(true)
 
    function changeFlagRef () {
      flagRef.value = !flagRef.value
    }
 
    return {
      flagRef,
      changeFlagRef
    }
  }
}
</script>
 
// jsx &&符號(hào)判斷
 
import { defineComponent, ref } from "vue"
import JSXChild from "./JSXChild.jsx"
 
export default defineComponent(() => {
  const flagRef = ref(true)
 
  function changeFlagRef () {
    flagRef.value = !flagRef.value
  }
 
  const render = () => {
    return <>
      <p onClick={changeFlagRef}>DEMO2--{flagRef.value.toString()}</p>
      {flagRef.value && <JSXChild a={flagRef.value}></JSXChild>}
    </>
  }
  return render
})

 循環(huán) template 使用 v-for 指令，jsx 使用數(shù)組的 .map 函數(shù)

// template v-for
 
<template>
  <ul>
    <li v-for="item in state.list" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
import { reactive } from "vue"
export default {
  setup () {
    const state = reactive({
      list: ["a", "b", "c"]
    })
 
    return {
      state
    }
  }
}
</script>
 
// jsx 數(shù)組 .map 函數(shù)
 
import { defineComponent, reactive } from "vue"
 
export default defineComponent(() => {
  const state = reactive({
    list: ["a1", "b1", "c1"]
  })
 
  const render = () => {
    return <>
      <ul>
{state.list.map(item => <li>{item}</li>)}
      </ul>
    </>
  }
  return render
})

3. JSX 和 slot （體會(huì) JSX 的優(yōu)越性）

• slot 是 Vue 發(fā)明的概念，為了完善 template 的能力
• slot 一直是 Vue 初學(xué)者的“噩夢(mèng)”，特別是：作用域 slot
• 但使用 JSX 將很容易理解，因?yàn)?JSX 本質(zhì)就是 js

總結(jié) 

到此這篇關(guān)于Vue3使用JSX的文章就介紹到這了,更多相關(guān)Vue3使用JSX內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！