本文 GitHub https://github.com/qq44924588... 上已經(jīng)收錄，更多往期高贊文章的分類(lèi)，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點(diǎn)復(fù)習(xí)，希望我們一起有點(diǎn)東西。

Vue.js 具有簡(jiǎn)單的 API 和幾個(gè)選項(xiàng)，可用于在我們的組件中定義HTML模板。

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

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

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

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

簡(jiǎn)介

先舉一個(gè)例子來(lái)說(shuō)明為什么 JSX 是好的。

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

<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>

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

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

render() 方法

注意:這里并不是說(shuō)沒(méi)有JSX就沒(méi)有一種簡(jiǎn)單的方法來(lái)處理上面的問(wèn)題，只是說(shuō)將這個(gè)邏輯移動(dòng)到帶有JSX的 render() 方法可以使組件更直觀。

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

這意味著當(dāng)我們?cè)?Vue 中定義 HTML 模板時(shí)，Vue 的模板編譯器將其編譯為一個(gè) createElement 函數(shù)，該函數(shù)帶有幾個(gè)參數(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獲取一個(gè) createElement 助手。
2. 我們以編程方式定義我們的標(biāo)簽。
3. 然后，我們創(chuàng)建標(biāo)簽并將其屬性，類(lèi)等作為對(duì)象傳遞。 我們可以傳遞給 createElement 的 選項(xiàng) 很多。
4. 我們返回新創(chuàng)建的元素進(jìn)行渲染。

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

舉個(gè)例子：

// 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)在你可能會(huì)問(wèn)這個(gè)問(wèn)題：“對(duì)可讀性來(lái)說(shuō)這不好嗎？” 答案是肯定的。 一旦定義了具有許多元素嵌套級(jí)別或具有多個(gè)同級(jí)元素的組件，我們就會(huì)遇到這個(gè)新問(wèn)題。

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

JSX 是什么

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

JSX 是 JavaScript 的類(lèi)似XML的語(yǔ)法擴(kuò)展，沒(méi)有任何定義的語(yǔ)義。

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

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

基本上，JSX 允許我們?cè)?JS 中使用類(lèi)似 Html 的語(yǔ)法。

配置 Vue 以使用 JSX

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

如果您使用的是不支持 JSX 的Vue-cli較舊版本，則可以通過(guò)安裝 babel-preset-vue-app 來(lái)添加它，并將其添加到您的 .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。

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

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

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

要修改事件，請(qǐng)使用

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>
  )
 }

我們也可以展開(kāi)一個(gè)大對(duì)象：

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的另一個(gè)好處是，我們不再需要注冊(cè)所需的每個(gè)組件。 我們只是導(dǎo)入和使用。

import {Button} from '../components'

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

如何使 JSX 與 TypeScript 一起使用

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

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

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

將 jsx 選項(xiàng)設(shè)置為 “preserve” 意味著 TypeScript 不應(yīng)處理JSX。 這樣做使 Babel 可以控制所有JSX 和 TypeScript 堅(jiān)持使用類(lèi)型，因?yàn)樗胁恢С?Vue JSX。

然后在項(xiàng)目中創(chuàng)建一個(gè) 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 可以加載聲明文件。 或者，可以通過(guò)以下方式在 tsconfig.json 中為其添加自動(dòng)加載功能：

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

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

總結(jié)

以上所述是小編給大家介紹的在 Vue 中使用 JSX 及使用它的原因淺析，希望對(duì)大家有所幫助！

最新評(píng)論