vue 에서 jsx 문법 을 정확하게 사용 하 는 자세 공유

머리말
또 즐 거 운 물고기 만 지 는 시간 이 되 었 습 니 다.저 는 황폐 해 서 는 안 된다 고 생각 합 니 다.H5 페이지 에서 제 가 사용 해 온 vant 는 소스 코드 에 대한 호기심 때문에 git 에서 vant 소스 코드 를 끌 었 습 니 다.그 안에 jsx 가 쓴 구성 요소 가 있 었 습 니 다.그래서 저 는 vue 에서 jsx 를 사용 하 는 탐색 을 시 작 했 습 니 다.
가상 DOM
가상 DOM 이란 무엇 인가
그 전에 가상 DOM,vue 와 react 프레임 워 크 가 내부 에서 가상 DOM 을 사 용 했 기 때 문 입 니 다.이렇게 하 는 이 유 는 js 를 통 해 DOM 을 조작 하 는 계산 비용 이 매우 높 기 때 문 입 니 다.js 업데이트 속도 가 빠 르 지만 dom 을 찾 아 업데이트 하 는 비용 이 매우 높 기 때 문 입 니 다.그러면 어떤 방법 으로 최적화 할 수 있 습 니까?vue 등 프레임 워 크 는 js 대상 을 사용 하고 js 대상 을 바 꾸 어 최종 적 으로 대량으로 처리 하고 DOM 을 한 번 에 업데이트 하기 때문에 가상 DOM 은 본질 적 으로 js 대상 입 니 다.
가상 DOM 의 장점

원래 의 실제 DOM 조작 부터 가상 DOM 조작 까지 검색 원 가 를 낮 춘 다

diff 비 교 를 통 해 우 리 는 더 빠 른 포 지 셔 닝 데이터 의 변 화 를 통 해 DOM

을 업데이트 할 수 있 습 니 다.

더 좋 은 ui 업데이트

추상 적 인 렌 더 링 과정 은 크로스 플랫폼 을 실현 하 는 능력 을 가 져 왔 다.예 를 들 어 vue 3 중의 createRenderer API

렌 더 링 함수 가 뭐 예요?
렌 더 링 함 수 는 가상 DOM 을 만 드 는 데 사 용 됩 니 다.vue 단일 파일 에서 템 플 릿 문법 을 작성 합 니 다.마지막 으로 바 텀 구현 에서 렌 더 링 함수 로 컴 파일 됩 니 다.
Vue 는 절대 다수의 경우 템 플 릿 을 사용 하여 HTML 을 만 드 는 것 을 추천 합 니 다.그러나 일부 장면 에서 자 바스 크 립 트 의 완전한 프로 그래 밍 능력 이 필요 하 다.이 때 는 템 플 릿 보다 컴 파일 러 에 더 가 까 운 렌 더 링 함 수 를 사용 할 수 있 습 니 다.
다음 장면 이 나 오 면 다음 과 같은 표기 법 도 원 하 는 효 과 를 실현 할 수 있 지만 그 는 지루 할 뿐만 아니 라 우 리 는 각 등급 의 제목 을 반복 해서 썼 다.우리 가 닻 요 소 를 추가 할 때,우 리 는 모든 v-if/v-else-if 분기 에서 다시 그것 을 반복 해 야 한다.

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

템 플 릿 은 대부분의 구성 요소 에서 매우 사용 하기 좋 지만,분명히 여기에 서 는 적합 하지 않다.그러면 render 함 수 를 사용 하여 위의 예 를 다시 쓰 려 고 합 니 다.

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
이렇게 렌 더 링 함 수 를 쓰 는 것 은 좀 고 통 스 럽 습 니 다.템 플 릿 에 더 가 까 운 쓰기 가 있 습 니까?vue 는 babel-plugin-jsx babel 플러그 인 을 제공 하여 vue 가 jsx 쓰기 를 지원 하도록 합 니 다.
제 가 사용 하 는 vuecli 가 만 든 vue 3+ts 프로젝트 는 비계 가 jsx 와 ts 의 관련 의존 도 를 통합 시 켰 습 니 다.
vue 3 에서 jsx 를 작성 하 는 두 가지 방식
파일 접미사 이름 을 vue 에서 tsx 또는 jsx 로 직접 변경 합 니 다.
vue 3 에서 render 옵션 을 직접 사용 하여 작성 할 수 있 습 니 다.

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

setup 에서 돌아 올 수도 있어 요.

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

두 가지 방식 모두 가능 합 니 다.구체 적 으로 개인 습관 을 보면 setup 에서 this 에 접근 할 수 없 지만 render 에 서 는 this 를 통 해 현재 vue 인 스 턴 스 를 방문 할 수 있 습 니 다.
사용법
class 바 인 딩 은 react 의 jsx 바 인 딩 과 차이 가 있 습 니 다.react 에 서 는 className,vue 에 서 는 class 를 사용 합 니 다.

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

스타일 바 인 딩

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

props 귀속

//    
setup() {
    return () => (
      <div style={{ color: "red" }}>
        <span>     </span>
        <Mycom msg={"        "} />
      </div>
 );

//    ，setup      ，    props   
  setup(props) {
    return () => <div>     {props.msg}</div>;
  },

이벤트 바 인 딩

setup() {
    function eventClick() {
      console.log("  ");
    }
    return () => <button onClick={eventClick}>  </button>;
},

구성 요소 사용자 정의 이벤트

//    
import { defineComponent } from "vue";
export default defineComponent({
  name: "Mycom",
  emits: ["event"],
  setup(props, { emit }) {
    function sendData() {
      emit("event", "        ");
    }
    return () => (
      <div>
        <span>     </span>
        <button onClick={sendData}>    </button>
      </div>
    );
  },
});

//    
// @ts-nocheck
//     jsx    ，   tsx   ts    ，             ts  @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 타 입 오류 도 이렇게 해결 할 수 있 습 니 다.

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

소켓

//    
setup() {
    const slots = {
      test: () => <div>    </div>,
      default: () => <div>    </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 에서 사용 할 수 없 으 며,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>
    );
},

마지막.
말 이 많 지 않 습 니 다.저 는 먼저 vant 소스 코드 를 열 고 첫 번 째 구성 요소 소스 코드 를 열 어 src=>button=>button.tsx 를 읽 으 려 고 합 니 다.
vue 에서 jsx 를 정확하게 사용 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 에서 jsx 내용 을 사용 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
레 퍼 런 스
vue 렌 더 링 함수

vuesx 문서

issues