Vue下使用JSX的方法是什么

這篇文章主要介紹了Vue下使用JSX的方法是什么的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue下使用JSX的方法是什么文章都會有所收獲，下面我們一起來看看吧。

Vue.js 具有簡單的 API 和幾個選項，可用于在我們的組件中定義HTML模板。

我們可以使用 <template> 標(biāo)簽選項，在根組件實例上定義 template 屬性，或者使用單文件組件。

上面的選項很棒并且可以完美地工作，但是，在您的應(yīng)用程序的生命周期中，有時會感到笨拙，設(shè)計過度或非常不靈活。

那么，我們?yōu)槭裁匆褂?JSX 而不是其他模板定義呢？

• JSX 更易讀， <div></div> 的寫法一看就是比 this.$createElement('div', {}, [...]) 簡潔很多。

• JSX 也是 JavaScript。

• Vue支持JSX。

• JSX 使自定義 Vue 組件更容易導(dǎo)入和管理。

簡介

先舉一個例子來說明為什么 JSX 是好的。

我們要構(gòu)建一個 <TextField/> 組件，該組件可以是普通的單行文本輸入或多行輸入（文本區(qū)域）。 我們的模板聲明可能看起來像這樣。

<div>
 <textarea v-if="multiline" v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">
 <input v-else v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">
 </div>

從上面的代碼片段中可以看到，我們很快就會遇到一些問題，比如重復(fù)代碼等等。想象一下，必須支持 input 上面所列的各種屬性。上面的這個小片段將會增長并成為一個難以維護(hù)的噩夢。

要解決這個問題，我們需要使用Vue進(jìn)行降級處理，因此需要使用理接近Vue的內(nèi)部API來解決這個問題。

render() 方法

注意:這里并不是說沒有JSX就沒有一種簡單的方法來處理上面的問題，只是說將這個邏輯移動到帶有JSX的 render() 方法可以使組件更直觀。

我們在 Vue 中創(chuàng)建的每個組件都有一個 render 方法。這個就是 Vue 選擇渲染組件的地方。即使我們不定義這個方法，Vue 也會為我們做這件事。

這意味著當(dāng)我們在 Vue 中定義 HTML 模板時，Vue 的模板編譯器將其編譯為一個 createElement 函數(shù)，該函數(shù)帶有幾個參數(shù)并從 render 函數(shù)返回結(jié)果。

為了修復(fù)上一節(jié)中的代碼，我們刪除了 template 屬性或 template 標(biāo)簽，并在組件上定義了 render() 方法。 如果在組件上定義了 render 方法，則 Vue 將忽略 template 定義。

...
 export default {
  name: 'TextField',
  render (createElement) {
   const tag = this.multiline ? 'textarea' : 'input'

  return createElement(tag, {
    class: {
     'text-input': true,
     'is-disabled': false
    },
    attrs: {
     name: this.name,
     placeholder: this.placeholder,
     'aria-invalid': false
    }
   })
  } 
 }
...

上面的代碼做了幾件事：

1. render 方法從Vue獲取一個 createElement 助手。

2. 我們以編程方式定義我們的標(biāo)簽。

3. 然后，我們創(chuàng)建標(biāo)簽并將其屬性，類等作為對象傳遞。 我們可以傳遞給 createElement 的 選項 很多。

4. 我們返回新創(chuàng)建的元素進(jìn)行渲染。

我們?yōu)?Vue 組件定義的每個模板都將轉(zhuǎn)換為可返回 createElement 函數(shù)的 render 方法。 因為這個原因， render 方法將優(yōu)先于模板定義。

舉個例子：

// HTML
<div>
 <p>Only you can stop forest fires</p>
</div>

模板編譯器將把上面的 HTML 轉(zhuǎn)換成:

...
render (createElement) {
 return createElement(
 'div',
 {},
 createElement(
  'p',
  {},
  'Only you can stop forest fires'
 )
 )
}
...

現(xiàn)在你可能會問這個問題：“對可讀性來說這不好嗎？” 答案是肯定的。 一旦定義了具有許多元素嵌套級別或具有多個同級元素的組件，我們就會遇到這個新問題。

這就是 JSX 出現(xiàn)的原因，它可以很好的解決此類問題。

JSX 是什么

JSX 是 Facebook 工程團(tuán)隊創(chuàng)造的一個術(shù)語。

JSX 是 JavaScript 的類似XML的語法擴(kuò)展，沒有任何定義的語義。

JSX 不打算由引擎或瀏覽器實現(xiàn)。相反，我們將使用 Babel 之類的轉(zhuǎn)置器將JSX轉(zhuǎn)換成常規(guī)的 JS 。

// 此行是JSX的示例
const heading = <h2>Welcome to Scotch</h2>;

基本上，JSX 允許我們在 JS 中使用類似 Html 的語法。

配置 Vue 以使用 JSX

如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的語法了。

如果您使用的是不支持 JSX 的Vue-cli較舊版本，則可以通過安裝 babel-preset-vue-app 來添加它，并將其添加到您的 .babelrc 文件中。

# Using npm
 npm install --save-dev babel-preset-vue-app
# Using yarn
 yarn add --dev babel-preset-vue-app

在 .babelrc 文件中，添加：

{
 "presets": ["vue-app"]
}

我們現(xiàn)在可以在組件的 render 函數(shù)中使用 JSX。

要監(jiān)聽 JSX 中的事件，我們需要 “on” 前綴。 例如，將 onClick 用于單擊事件。

render (createElement) {
  return (
   <button onClick={this.handleClick}></button>
  )
 }

要修改事件，請使用

render (createElement) {
  return (
   <button onClick:prevent={this.handleClick}></button>
  )
 }

綁定變量，注意這里不是使用 :

render (createElement) {
  return (
   <button content={this.generatedText}></button>
  )
 }

將HTML字符串設(shè)置為元素的內(nèi)容，使用 domPropsInnerHTML 而不是使用 v-html

render (createElement) {
  return (
   <button domPropsInnerHTML={htmlContent}></button>
  )
 }

我們也可以展開一個大對象：

render (createElement) {
  return (
   <button {...this.largeProps}></button>
  )
 }

在 render 中使用JSX

回到我們最初的 “TextField” 組件?，F(xiàn)在我們已經(jīng)在 Vue 應(yīng)用程序中啟用了 JSX，我們現(xiàn)在可以這樣做了。

render (createElement) {
  const inputAttributes = {
   class: 'input-field has-outline', // class definition
   onClick: this.handleClick // event handler
   backdrop: false // custom prop
  }
  const inputMarkup = this.multiline
   ? <textarea {...inputAttributes}></textarea>
   : <input {...inputAttributes}/>
 return inputMarkup
 }

導(dǎo)入 Vue JS 組件

在 Vue 中使用JSX的另一個好處是，我們不再需要注冊所需的每個組件。 我們只是導(dǎo)入和使用。

import {Button} from '../components'

export default {
  render (createElement) {
   return <Button primary={true}>Edit</Button>
  }
 }

如何使 JSX 與 TypeScript 一起使用

TypeScript 用作一種向 JavaScript添加類型檢查的機(jī)制。要在 JSX 支持 TypeScript中，需要修改 tsconfig.json 。

要在 TypeScript 中啟用 JSX，請先將該文件另存為 .tsx 文件，然后將 tsconfig.json 修改為包括：

{
 "compilerOptions": {
  ....
  "jsx": "preserve",
 }
 }

將 jsx 選項設(shè)置為 “preserve” 意味著 TypeScript 不應(yīng)處理JSX。 這樣做使 Babel 可以控制所有JSX 和 TypeScript 堅持使用類型，因為它尚不支持 Vue JSX。

然后在項目中創(chuàng)建一個 jsx.d.ts 文件，并為 Vue 添加 TypeScript JSX 聲明。

import Vue, {VNode} from 'vue'

declare global {
 namespace JSX {
  interface Element extends VNode {}
  interface ElementClass extends Vue {}
  interface ElementAttributesProperty {
  $props: {}
  }
  interface IntrinsicElements {
 [elemName: string]: any
  }
 }
 }

確保 TypeScript 可以加載聲明文件。 或者，可以通過以下方式在 tsconfig.json 中為其添加自動加載功能：

{
 "compilerOptions": {
  ...
  "typesRoot": ["./node_modules/@types", "./types"]
 }
 }

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug 。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

關(guān)于“Vue下使用JSX的方法是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue下使用JSX的方法是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。