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

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

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

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

• JSX 更易讀， 的寫法一看就是比 this.$createElement('div', {}, […])簡潔很多。
• JSX 也是 JavaScript。
• Vue支持JSX。
• JSX 使自定義 Vue 組件更容易導(dǎo)入和管理。

簡介

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

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

 
 
 

  
  
  
typeof10;//=>'number'typeof'Hello';//=>'string'typeoffalse;//=>'boolean'typeof{a:1};//=>'object'typeofundefined;//=>'undefined'typeofSymbol();//=>'symbol' 
 
 
 

從上面的代碼片段中可以看到，我們很快就會遇到一些問題，比如重復(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定義。

 
 
 

  
  
  
classCat{}constmyCat=newCat();myCatinstanceofCat;//=>true 
 
 
 

上面的代碼做了幾件事：

• render方法從Vue獲取一個createElement助手。
• 我們以編程方式定義我們的標(biāo)簽。
• 然后，我們創(chuàng)建標(biāo)簽并將其屬性，類等作為對象傳遞。我們可以傳遞給createElement的選項很多。
• 我們返回新創(chuàng)建的元素進(jìn)行渲染。

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

舉個例子：

 
 
 

  
  
  
//HTML
Onlyyoucanstopforestfires
 
 
 
 

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

 
 
 

  
  
  
...render(createElement){returncreateElement('div',{},createElement('p',{},'Onlyyoucanstopforestfires'))}... 
 
 
 

現(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的示例constheading=
WelcometoScotch
; 
 
 
 

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

配置 Vue 以使用 JSX

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

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

 
 
 

  
  
  
#Usingnpmnpminstall--save-devbabel-preset-vue-app#Usingyarnyarnadd--devbabel-preset-vue-app 
 
 
 

在.babelrc文件中，添加：

 
 
 

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

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

在 Vue 中使用 JSX 需要注意的地方

在 Vue 中使用JSX需要注意幾點(diǎn)。

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

 
 
 

  
  
  
render(createElement){return()} 
 
 
 

要修改事件，請使用

 
 
 

  
  
  
render(createElement){return()} 
 
 
 

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

 
 
 

  
  
  
render(createElement){return()} 
 
 
 

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

 
 
 

  
  
  
render(createElement){return()} 
 
 
 

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

 
 
 

  
  
  
render(createElement){return()} 
 
 
 

在 render 中使用JSX

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

 
 
 

  
  
  
render(createElement){constinputAttributes={class:'input-fieldhas-outline',//classdefinitiononClick:this.handleClick//eventhandlerbackdrop:false//customprop}constinputMarkup=this.multiline?:returninputMarkup} 
 
 
 

導(dǎo)入 Vue JS 組件

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

 
 
 

  
  
  
import{Button}from'../components'exportdefault{render(createElement){returnEdit}} 
 
 
 

如何使 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 聲明。

 
 
 

  
  
  
importVue,{VNode}from'vue'declareglobal{namespaceJSX{interfaceElementextendsVNode{}interfaceElementClassextendsVue{}interfaceElementAttributesProperty{$props:{}}interfaceIntrinsicElements{[elemName:string]:any}}} 
 
 
 

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

 
 
 

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

本文題目：如何在Vue中使用JSX以及使用它的原因
文章轉(zhuǎn)載：http://www.5511xx.com/article/djpchge.html