Vue 템플릿 vs Vue jsx

Vue 템플릿 vs Vue jsx

Vue template vs Vue function jsx에 대해 설명해 주시겠습니까? 어떤 것이 사용하기에 좋은가요?

예: 2개의 컴포넌트가 있습니다.

1. Component1.vue

<template>
  <div>
     <p>{{message}}</p>
  </div>
<template>
<script>
  export default {
     name:'Component1',
     data(){
      return{
        message:'This is component1'
      }
     },
  }
</script>

2. Component2.vue

export default {
 name:'Component2',
 data(){
   return{
   message:'This is component2'
  }
 },
 render(){
  return(<p>{this.message}</p>)
 }
}

이렇게 써도 될까요?component2.vue둘 다 성능은 어떻습니까?

컴포넌트를 쓰는 두 버전 모두 동일한 작업을 수행합니다.성능만 따지면 별 차이가 없을 겁니다.둘 다 컴포넌트의 가상 DOM 트리를 반환하는 렌더 함수로 컴파일됩니다.

차이점은 구현의 맛과 구문입니다.Vue에서는 JSX보다 읽기 쉽기 때문에 대부분 템플릿을 사용하지만 JSX가 더 적합한 경우가 있습니다.예를 들어 다이내믹헤더 컴포넌트를 설계하려고 하는 경우를 생각해 보겠습니다.level어떤 것이 좋을지 결정하다<h1...h6>사용할 태그:

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

렌더링 기능 또는 JSX를 사용하여 같은 내용을 보다 우아하게 작성할 수 있습니다.

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

또, TypeScript 를 사용하고 있는 경우는, JSX 구문을 사용해 소품이나 어트리뷰트를 검증하는 컴파일 타임 체크를 실시합니다만, Vue 2 로 설정하는 것은 꽤 번거롭습니다.Vue 3을 사용하면 훨씬 간단합니다.

컴포넌트의 동적 로딩이 고려되는 한, 빌트인을 사용할 수 있습니다.<component />으로 구성하다.is템플릿 내의 프로포트는 다음과 같습니다.

<component v-bind:is="someComponentToRenderDynamically"></component>

따라서 이는 JSX 또는 다이렉트 렌더 함수 기반 구성요소와 동일한 이점을 제공합니다.상세한 것에 대하여는, 다음의 문서를 참조해 주세요.

동적 컴포넌트

렌더링 기능 & JSX

먼저 템플릿 구문과 JSX에 대해 알아보겠습니다.

• JSX: JavaScript 파일 내에 HTML과 같은 마크업을 쓸 수 있는 JavaScript 구문 확장입니다.기본적으로 JSX는 HTML을 JavaScript 코드에 바로 삽입할 수 있도록 도와주는 JavaScript 렌더 함수입니다.
• 템플릿 구문: 렌더링된 DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문입니다.

Vue 템플릿을 사용하는 것은 둘 다 JavaScript를 사용하여 생성된다는 점에서 JSX를 사용하는 것과 같습니다.주요 차이점은 Vue 템플릿은 구문적으로 유효한 HTML이며 규격 준거 브라우저 및 HTML 파서로 구문 분석할 수 있다는 것입니다.

그것은 무엇을 뜻하나요?

• 실제 HTML 파일에서는 JSX 함수가 사용되지 않지만 Vue 템플릿에서는 사용되지 않습니다.

뭐가 다른데?어떤 것을 사용하는 것이 더 나을까요?

Vue.js 문서에 따르면 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다.
그러나 Virtual DOM 개념에 익숙하고 JavaScript의 원시 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수도 있습니다(옵션 JSX 지원).

단, 템플릿과 같은 수준의 컴파일 타임 최적화는 실시하지 않습니다.

따라서 Vue를 사용하여 템플릿 구문을 작성하는 것이 더 최적화된다는 결론을 내릴 수 있습니다.

vue 템플릿은 jsx 함수보다 훨씬 읽기 쉽고 이해하기 쉽습니다.

변수/속성을 저장하고 "{someVariables}}"를 사용하여 액세스하는 것이 vue 메서드에 항상 읽도록 지시하는 것보다 훨씬 쉽습니다.

즉, vue 템플릿을 사용하면 동적 페이지(및 다른 것)를 구현하기 쉽기 때문에 vue 템플릿을 사용하는 것이 좋습니다.

또, 현시점에서는, html 코드를 계속 메서드로 송신하는 것은 그다지 좋은 생각이 아닙니다.

언급URL : https://stackoverflow.com/questions/66467013/vue-template-vs-vue-jsx