快捷導(dǎo)航

vue中正確使用jsx語(yǔ)法的姿勢(shì)分享

更新時(shí)間：2021年07月15日 10:30:34 作者：啥都不會(huì)的小前端

這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下

前言

又到了愉快的摸魚(yú)時(shí)間,我覺(jué)得不能荒廢,H5頁(yè)面我一直用的vant,出于對(duì)源碼的好奇,我從git上拉了一份vant源碼,里面竟然都是jsx寫(xiě)的組件,于是我開(kāi)始了對(duì)在vue中使用jsx的探索

虛擬DOM

什么是虛擬DOM

在這之前，先了解下虛擬DOM，vue和react框架都在內(nèi)部使用了虛擬DOM，這樣做的原因是通過(guò)js操作DOM的計(jì)算成本很高，雖然js更新速度很快，但是查找dom并更新的成本很高。那么有什么方法可以優(yōu)化呢，vue等框架使用js對(duì)象，通過(guò)改變js對(duì)象，最后進(jìn)行批量處理，一次更新DOM，所以虛擬DOM本質(zhì)上就是一個(gè)js對(duì)象

虛擬DOM的優(yōu)點(diǎn)

從原先的操作真實(shí)DOM到操作虛擬DOM，降低查找成本
通過(guò)diff比對(duì)，我們可以更快的定位數(shù)據(jù)的變化，從而更新DOM
更好的ui更新
抽象渲染過(guò)程，帶來(lái)了實(shí)現(xiàn)跨平臺(tái)的能力，如vue3中的createRenderer API

渲染函數(shù)是什么

渲染函數(shù)是用來(lái)生成虛擬DOM的。我們?cè)趘ue單文件中編寫(xiě)模板語(yǔ)法，最終會(huì)在底層實(shí)現(xiàn)中被編譯成渲染函數(shù)

Vue 推薦在絕大多數(shù)情況下使用模板來(lái)創(chuàng)建你的 HTML。然而在一些場(chǎng)景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)你可以用渲染函數(shù)，它比模板更接近編譯器。

當(dāng)出現(xiàn)以下場(chǎng)景，雖然下列寫(xiě)法也能實(shí)現(xiàn)想要的效果，但是他不僅冗長(zhǎng)，而且我們?yōu)槊總€(gè)級(jí)別標(biāo)題重復(fù)書(shū)寫(xiě)了。當(dāng)我們添加錨元素時(shí)，我們必須在每個(gè) v-if/v-else-if 分支中再次重復(fù)它

const { createApp } = Vue

const app = createApp({})

app.component('anchored-heading', {
  template: `
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  `,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

雖然模板在大多數(shù)組件中都非常好用，但是顯然在這里它就不合適了。那么，我們來(lái)嘗試使用 render 函數(shù)重寫(xiě)上面的例子：

const { createApp, h } = Vue

const app = createApp({})

app.component('anchored-heading', {
  render() {
    return h(
      'h' + this.level, // tag name
      {}, // props/attributes
      this.$slots.default() // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

jsx

這樣寫(xiě)渲染函數(shù)有點(diǎn)痛苦，有沒(méi)有更接近模板的寫(xiě)法呢，vue提供了一個(gè)babel-plugin-jsx babel插件來(lái)讓vue支持jsx寫(xiě)法

我這邊使用的vuecli創(chuàng)建的vue3 + ts項(xiàng)目，腳手架已經(jīng)集成了jsx和ts的相關(guān)依賴

在vue3中編寫(xiě)jsx的兩種方式

直接將文件后綴名從vue改成tsx或者jsx

在vue3中，可以直接使用render選項(xiàng)編寫(xiě)

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  render() {
    return <div>我是一個(gè)div</div>;
  },
});

也可以在setup中返回

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  setup() {
    return () => <div>我是div</div>;
  },
});

兩種方式都可以，具體看個(gè)人習(xí)慣，setup中訪問(wèn)不到this，但是render中可以通過(guò)this訪問(wèn)當(dāng)前vue實(shí)例

用法

class綁定，和react的jsx綁定的有區(qū)別，react中使用className，vue中使用class

 setup() {
   return () => <div class="test">我是div</div>;
 },

style綁定

  setup() {
    return () => <div style={{ color: "red" }}>我是div</div>;
  },

props綁定

// 父組件
setup() {
    return () => (
      <div style={{ color: "red" }}>
        <span>我是父組件</span>
        <Mycom msg={"我是父組件傳的值"} />
      </div>
 );

// 子組件，setup的第一個(gè)參數(shù)，可以獲取props里的值
  setup(props) {
    return () => <div>我是子組件{props.msg}</div>;
  },

事件綁定

setup() {
    function eventClick() {
      console.log("點(diǎn)擊");
    }
    return () => <button onClick={eventClick}>按鈕</button>;
},

組件自定義事件

// 子組件
import { defineComponent } from "vue";
export default defineComponent({
  name: "Mycom",
  emits: ["event"],
  setup(props, { emit }) {
    function sendData() {
      emit("event", "子組件傳遞的數(shù)據(jù)");
    }
    return () => (
      <div>
        <span>自定義事件</span>
        <button onClick={sendData}>傳遞數(shù)據(jù)</button>
      </div>
    );
  },
});

// 父組件
// @ts-nocheck
// 這樣寫(xiě)在jsx中沒(méi)問(wèn)題，但是在tsx中會(huì)報(bào)ts類型錯(cuò)誤，所以我在上面忽略了當(dāng)前文件ts監(jiān)測(cè)@ts-nocheck
import { defineComponent } from "vue";
import Mycom from "./mycom";
export default defineComponent({
  name: "Jsx",
  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom onEvent={getSon} />
      </div>
    );
  },
});

也可以這樣解決ts類型報(bào)錯(cuò)

  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom {...{ onEvent: getSon }} />
      </div>
    );
  },

插槽

// 父組件
setup() {
    const slots = {
      test: () => <div>具名插槽</div>,
      default: () => <div>默認(rèn)插槽</div>,
    };
    return () => (
      <div>
        <Mycom v-slots={slots}></Mycom>
      </div>
    );
},

setup(props, { slots }) {
// 子組件
    return () => (
      <div>
        <span>插槽</span>
        {slots.default?.()}
        {slots.test?.()}
      </div>
    );
  },

指令，v-if，v-for等指令在jsx中無(wú)法使用，jsx只支持v-model和v-show指令

  setup() {
    const inputData = ref("");
    return () => (
      <div>
        <span v-show={true}>顯示</span>
        <span v-show={false}>隱藏</span>
        <input type="text" v-model={inputData.value} />
        <span>{inputData.value}</span>
      </div>
    );
},