vue3에서 JSX를 사용하는 방법을 자세히 설명하는 기사

vue에서 JSX를 어떻게 사용하나요? 다음 글에서는 vue3에서 JSX를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

대부분의 경우 Vue는 템플릿 <template></template> 구문을 사용하여 애플리케이션을 만들 것을 권장합니다. <template></template>语法来创建应用。

在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。【学习视频分享：vue视频教程、web前端视频】

然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

h函数

Vue 提供了一个 h() 函数用于创建 vnodes虚拟dom。如下示例：

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

在组件中如何使用呢？

之前当组合式 API 与模板一起使用时，setup() 钩子的返回值是用于暴露数据给模板。但是当使用h()的时候，setup() 钩子返回的是渲染函数：

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // 返回渲染函数
    return () => h('div', props.msg + count.value)
  }
}

手写的 h 函数，可以处理动态性更高的场景。但是如果是复杂的场景，h 函数写起来就显得非常繁琐，需要自己把所有的属性都转变成对象。并且组件嵌套的时候，对象也会变得非常复杂。不过，因为 h 函数也是返回虚拟 DOM 的，所以有没有更方便的方式去写 h 函数呢？答案是肯定的，这个方式就是 JSX。

JSX

JSX 是 JavaScript 的一个类似 XML 的扩展，有了它，我们可以用简单方式来创建vnodes：

const vnode = <div id="app">hello</div>

这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展。上面的代码直接在 JavaScript 环境中运行时，会报错。JSX 的本质就是下面代码的语法糖。

const vnode = createVnode('div',{id:"app"}, 'hello')

其实h 函数内部也是调用 createVnode 来返回虚拟 DOM。

那么，如何在Vue项目中使用JSX呢？

默认的情况下，vue3+vite的项目不支持jsx，如果想支持jsx，需要安装插件@vitejs/plugin-vue-jsx

安装

npm i @vitejs/plugin-vue-jsx -D

在vite.config.js中进行配置：

import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx

export default defineConfig({
  plugins: [
    vue(), 
    vueJsx()
  ],
});

然后就可以在Vue组件中使用了：

// render.vue
<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};
</script>

注意：script中lang要改成jsx。

或者是一个jsx文件：

// render.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>jsx文件</div>
  }
})

Template vs JSX

我们该怎么选择 JSX 和 template 呢？

template优势：template 的语法是固定的，只有 v-if、v-for 等等语法。我们按照这种固定格式的语法书写，这样 Vue3 在编译层面就可以很方便地去做静态标记的优化，减少Diff过程。比如静态提升，类型标记，树结构打平等来提高虚拟 DOM 运行时性能。这也是 Vue 3 的虚拟 DOM 能够比 Vue 2 快的一个重要原因。

参考：Vue渲染机制

JSX优势：template 则因为语法限制原因，不能够像 JSX 那样可以支持更动态的需求。这也是 JSX 相比于 template 的一个优势。

JSX 相比于 template 还有一个优势，是可以在一个文件内返回多个组件。

那如何选择呢？

在实现业务需求的时候，优先使用 template，尽可能地利用 Vue 本身的性能优化。而对于动态性要求较高的组件可以使用 JSX 来实现。（比如后面，我会用JSX来实现动态表单生成器）

总结

首先，我们在项目中通常使用template模板来创建应用，template模板会在构建阶段被编译成render渲染函数。渲染函数就是用来返回虚拟DOM的函数。

那么我们其实可以跳过这个步骤，直接使用h函数来生成虚拟DOM。

h函数的内部执行的其实是createVNode函数来生成虚拟DOM的，但是由于h函数比较难写，所以我们使用JSX来更加方便快捷的书写。JSX的内部其实也是使用的createVNode函数。

JSX在JavaScript中是不能直接执行的，在vite项目中，我们需要安装插件@vitejs/plugin-vue-jsx

Vue 3 프로젝트 개발에서는 템플릿이 Vue 3의 기본 작성 방법입니다. 템플릿이 HTML과 매우 비슷해 보이지만 Vue는 실제로 템플릿을 렌더링 함수로 구문 분석한 다음 구성 요소가 실행될 때 렌더링 함수가 가상 DOM을 반환합니다. [학습 동영상 공유: vue 동영상 튜토리얼

, 웹 프론트엔드 비디오

]🎜🎜그러나 일부 사용 시나리오에서는 우리는 실제로 JavaScript에 대한 완전한 프로그래밍 기술이 필요합니다. 여기서 렌더링 기능이 유용하게 사용됩니다. 🎜

h 함수

🎜Vue는 vnode 가상 DOM을 생성하기 위한 h() 함수를 제공합니다. 다음 예: 구성 요소에서 🎜rrreee🎜를 사용하는 방법은 무엇입니까? 🎜🎜이전에는 구성 API를 템플릿과 함께 사용할 때 setup() 후크의 반환 값을 사용하여 템플릿에 데이터를 노출했습니다. 그러나 h()를 사용할 때 setup() 후크는 렌더링 함수를 반환합니다. 🎜rrreee🎜Handwriting h 함수는 처리할 수 있습니다. 역동적인 장면. 하지만 복잡한 장면이라면 h 함수를 작성하기가 매우 번거롭고, 모든 속성을 직접 객체로 변환해야 합니다. 구성 요소가 중첩되면 개체가 매우 복잡해집니다. 하지만 h 함수도 가상 DOM을 반환하므로 h 함수를 작성하는 더 편리한 방법이 있을까요? 대답은 '예'입니다. 방법은 JSX입니다. 🎜

JSX

🎜JSX는 XML과 유사한 JavaScript 확장으로 이를 사용하여 간단한 방법으로 vnode를 만들 수 있습니다. 🎜 rrreee 🎜JavaScript에서 HTML을 작성하는 이 구문을 JSX라고 하며 이는 JavaScript 구문의 확장입니다. 위 코드를 JavaScript 환경에서 직접 실행하면 오류가 보고됩니다. JSX의 핵심은 다음 코드의 구문 설탕입니다. 🎜rrreee🎜사실 createVnode는 가상 DOM을 반환하기 위해 h 함수 내에서도 호출됩니다. 🎜🎜그렇다면 Vue 프로젝트에서 JSX를 어떻게 사용하나요? 🎜🎜기본적으로 vue3+vite 프로젝트는 jsx를 지원하지 않습니다. jsx를 지원하려면 플러그인 @vitejs/plugin-vue-jsx🎜🎜설치 🎜rrreee🎜를 설치해야 합니다. vite.config에서 구성: 🎜rrreee🎜 그런 다음 Vue 구성 요소에서 사용할 수 있습니다: 🎜rrreee

🎜참고: 스크립트의 lang을 jsx로 변경해야 합니다. 🎜

🎜또는 jsx 파일: 🎜rrreee

템플릿과 JSX

🎜JSX와 템플릿을 어떻게 선택해야 할까요? 🎜🎜템플릿의 장점: 템플릿의 구문은 고정되어 있으며 v-if, v-for 등의 구문만 사용됩니다. 우리는 Vue3가 컴파일 수준에서 정적 태그를 쉽게 최적화하고 Diff 프로세스를 줄일 수 있도록 이 고정 형식 구문에 따라 작성합니다. 예를 들어 정적 승격, 유형 태그, 트리 구조 균형 조정 등은 가상 DOM 런타임 성능을 향상시킬 수 있습니다. 이는 Vue 3의 가상 DOM이 Vue 2보다 빠른 중요한 이유이기도 합니다. 🎜

🎜참조: Vue 렌더링 메커니즘🎜🎜

🎜JSX 장점: 템플릿은 구문 제한으로 인해 JSX와 같은 보다 동적인 요구 사항을 지원할 수 없습니다. 이는 템플릿에 비해 JSX의 장점이기도 합니다. 🎜🎜JSX는 하나의 파일에 여러 구성 요소를 반환할 수 있다는 점에서 템플릿에 비해 또 다른 장점이 있습니다. 🎜🎜그럼 어떻게 선택하나요? 🎜🎜비즈니스 요구사항을 실현할 때 템플릿 사용을 우선시하고 Vue 자체 성능 최적화를 최대한 활용하세요. 더 높은 동적 요구 사항을 가진 구성 요소는 JSX를 사용하여 구현할 수 있습니다. (예를 들어 나중에 JSX를 사용하여 동적 양식 생성기를 구현하겠습니다.) 🎜

요약

🎜우선 우리가 일반적으로 사용하는 프로젝트의 템플릿 애플리케이션을 생성하기 위해 템플릿 템플릿은 빌드 단계에서 렌더링 렌더링 기능으로 컴파일됩니다. 렌더링 함수는 가상 DOM을 반환하는 데 사용되는 함수입니다. 🎜🎜그런 다음 실제로 이 단계를 건너뛰고 h 함수를 직접 사용하여 가상 DOM을 생성할 수 있습니다. 🎜🎜h 함수의 내부 실행은 실제로 가상 DOM을 생성하는 createVNode 함수입니다. 하지만 h 함수는 작성하기 어렵기 때문에 JSX를 사용하여 보다 편리하고 빠르게 작성합니다. createVNode 함수는 실제로 JSX에서 내부적으로 사용됩니다. 🎜🎜JSX는 JavaScript에서 직접 실행할 수 없습니다. vite 프로젝트에서는 @vitejs/plugin-vue-jsx🎜🎜 플러그인을 설치하고 이에 맞게 구성해야 합니다. 🎜

마지막으로 템플릿과 JSX의 장단점을 비교해보았습니다. 템플릿의 장점은 구문이 고정되어 있고 작성하기 쉽다는 것입니다. Vue3은 컴파일 수준에서 템플릿 컴파일을 위해 많은 최적화를 수행했습니다. JSX의 장점은 유연성입니다. 동적 요구 사항이 높은 경우에는 JSX가 표준 구성이 되었습니다.

예술 산업에는 전문 분야가 있습니다. 템플릿과 JSX는 서로 다른 시나리오에서 각각 장점과 단점이 있습니다. 둘 다 적절하게 사용하면 강력한 프로그래밍 도구입니다.

(종료)

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 vue3에서 JSX를 사용하는 방법을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!