Vue3+Vite에서 JSX를 사용하는 방법에 대한 자세한 설명

青灯夜游
풀어 주다: 2022-12-09 20:27:28
앞으로
3035명이 탐색했습니다.

Vue+Vite에서 JSX를 사용하는 방법은 무엇인가요? 다음 글에서는 Vue3+Vite에서 JSX를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

Vue3+Vite에서 JSX를 사용하는 방법에 대한 자세한 설명

【관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발

JSX 소개

JSX(JavaScript 및 XML)는 HTML-in-JavaScript의 구문 확장으로, 리액트 엔터. JSX는 UI가 상호 작용하는 방식의 본질을 어떻게 표현해야 하는지 설명하는 훌륭한 방법입니다. JSX는 JavaScript 구문의 확장이므로 HTML과 유사한 코드가 JS와 공존할 수 있습니다. 예:

const button = <MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
로그인 후 복사

버튼 상수를 JSX 표현식이라고 합니다. 이를 사용하여 애플리케이션에서 <MyButton> 태그를 렌더링할 수 있습니다. 브라우저는 JSX를 직접 읽고 구문 분석할 수 없습니다. (Babel 또는 Parcel과 같은 도구를 사용하여) 컴파일된 후 JSX 표현식은 다음과 같습니다. <MyButton> 标签。浏览器是无法读取直接解析 JSX 的。JSX 表达式经过( Babel 或 Parcel 之类的工具)编译之后是这样的:

React.createElement(
  MyButton,
  {color: &#39;blue&#39;, shadowSize: 2},
  &#39;Click Me&#39;
)
로그인 후 복사

实际上,JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。可以使用 React.createElement() 自己编写 UI 来跳过编译步骤。但是,这样做会失去 JSX 的声明性优势,并且代码变得更难以阅读。编译是开发过程中的一个额外步骤,但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外,流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非您愿意,否则不必自己配置编译。如果你想测试一些特定的 JSX 会转换成什么样的 JavaScript,你可以尝试使用 在线的 Babel 编译器

React 并不强制要求使用 JSX。当你不想在构建环境中配置有关 JSX 编译时,不在 React 中使用 JSX 会更加方便。例如,用 JSX 编写的代码:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
root.render(<Hello toWhat="World" />);
로그인 후 복사

可以编写为不使用 JSX 的代码:

class Hello extends React.Component {
  render() {
    return React.createElement(&#39;div&#39;, null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
root.render(React.createElement(Hello, {toWhat: &#39;World&#39;}, null));
로그인 후 복사

在 Vue3 中使用 JSX

Vue 使用单文件组件,把 template 模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包或构建工具(例如 Webpack、Vite)处理。

<template> 元素包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML,以及 Vue 特定的语法。通过设置 <template> 标签的 lang 属性,例如可以通过设置 <template lang="pug"> 就可以在使用 Pug 模板来替代标准 HTML。

而 .vue 文件中的 <script> 标签包含组件中所有的非显示逻辑,并且需要默认导出一个 JS 对象。该对象是在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含了 template 模板的对象会被处理和转换成为一个有 render() 函数的 Vue 组件。

组件的 CSS 样式写在 <style> 标签里,如果添加了 scoped 属性,Vue 会把样式的范围限制到单文件组件的内容里。这是类似于 CSS-in-JS 的解决方案,只不过允许书写纯粹的 CSS。如果通过 CLI 创建项目时选择了 CSS 预处理器,则可以将 lang 属性添加到 <style>

npm i @vitejs/plugin-vue-jsx -D
로그인 후 복사
로그인 후 복사

사실 JSX는 React.createElement(comComponent, props, ...children) 함수에 대한 구문 설탕일 뿐입니다. React.createElement()를 사용하여 UI를 직접 작성하면 컴파일 단계를 건너뛸 수 있습니다. 그러나 그렇게 하면 JSX의 선언적 이점이 사라지고 코드를 읽기가 더 어려워집니다. 컴파일은 개발 프로세스의 추가 단계이지만 React 커뮤니티의 많은 개발자는 JSX의 가독성이 그만한 가치가 있다고 믿습니다. 또한 널리 사용되는 도구를 사용하면 JSX-to-JavaScript 컴파일이 설정 프로세스의 일부가 됩니다. 원하지 않는 한 컴파일을 직접 구성할 필요는 없습니다. 특정 JSX가 어떤 종류의 JavaScript로 변환되는지 테스트하려면 온라인 바벨 컴파일러
.

React에는 JSX를 사용할 필요가 없습니다. 빌드 환경에서 JSX 컴파일을 구성하지 않으려는 경우 React에서 JSX를 사용하지 않는 것이 더 편리합니다. 예를 들어 JSX로 작성된 코드:

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})
로그인 후 복사
로그인 후 복사

는 JSX 없이 작성할 수 있습니다. 🎜
import HelloWorld from &#39;./HelloWorld.vue&#39;
export default {
  setup() {
    return () => <HelloWorld msg="11" />;
  },
};
로그인 후 복사
로그인 후 복사

🎜Using JSX in Vue3🎜🎜🎜Vue는 단일 파일 구성 요소를 사용하고 템플릿 템플릿을 넣습니다. 관련 스크립트와 CSS는 .vue로 끝나는 단일 파일에 함께 통합됩니다. 이러한 파일은 궁극적으로 JS 패키징 또는 빌드 도구(예: Webpack, Vite)에 의해 처리됩니다. 🎜
🎜<template> 요소에는 모든 마크업 구조와 구성 요소 표시 논리가 포함되어 있습니다. 템플릿에는 유효한 HTML과 Vue 관련 구문이 포함될 수 있습니다. 예를 들어 <template> 태그의 lang 속성을 ​​설정하면 <template lang="pug"><를 설정하여 사용할 수 있습니다. /code> 표준 HTML을 대체하는 Pug 템플릿입니다. 🎜🎜.vue 파일의 <script> 태그에는 구성 요소의 모든 비표시 로직이 포함되어 있으며 기본적으로 JS 개체를 내보내야 합니다. 이 객체는 구성 요소가 로컬로 등록되고, 속성이 정의되고, 로컬 상태가 처리되고, 메서드가 정의되는 곳입니다. 빌드 단계 동안 템플릿을 포함하는 이 객체는 처리되어 render() 함수를 사용하여 Vue 구성 요소로 변환됩니다. 🎜🎜구성 요소의 CSS 스타일은 <style> 태그에 작성됩니다. scoped 속성이 추가되면 Vue는 스타일 범위를 콘텐츠로 제한합니다. 단일 파일 구성 요소의. 이는 CSS-in-JS와 유사한 솔루션이지만 순수한 CSS 작성을 허용합니다. CLI를 통해 프로젝트를 생성할 때 CSS 전처리기를 선택한 경우 Webpack이 빌드 시 콘텐츠를 처리할 수 있도록 <style> 태그에 lang 속성을 ​​추가할 수 있습니다. 시간. 🎜🎜🎜jsx는 React에서 처음 도입되었지만 실제로 JSX 구문은 런타임 의미 체계를 정의하지 않으며 다양한 출력 형식으로 컴파일될 수 있습니다. 이전에 JSX 구문을 사용한 적이 있다면 🎜Vue의 JSX 컴파일 방법이 React🎜의 JSX 컴파일 방법과 다르기 때문에 Vue 애플리케이션에서 React의 JSX 컴파일을 사용할 수 없다는 점에 유의하세요. React JSX 구문과의 몇 가지 주목할만한 차이점은 다음과 같습니다. 🎜

Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时,确保在 tsconfig.json 中配置了 "jsx": "preserve",这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。

安装插件(@vitejs/plugin-vue-jsx)

vite 官方提供了官方的插件来支持在 vue3 中使用 jsx/tsx,直接安装就行。

npm i @vitejs/plugin-vue-jsx -D
로그인 후 복사
로그인 후 복사

安装完之后在 vite.config.js 文件中的 plugins 字段中添加 jsx 支持:

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})
로그인 후 복사
로그인 후 복사

这样就可以在项目中使用 jsx/tsx 了。

新建 jsx 文件

在项目中新建 jsx 或 tsx 后缀的文件,语法和 js 文件类似,但是和 .vue 文件中的 <script> 标签一样需要默认导出一个 JS 对象。该对象是在本地注册组件、定义属性、处理本地状态、定义方法等的地方。

import HelloWorld from &#39;./HelloWorld.vue&#39;
export default {
  setup() {
    return () => <HelloWorld msg="11" />;
  },
};
로그인 후 복사
로그인 후 복사

语法

1、插值。与 vue 模板语法中的插值一样,但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式,比如:2 + 2,user.firstName,formatName(user) 等。

// 模板语法
<span>{{ a + b }}</span>

// jsx/tsx
<span>{ a + b }</span>
로그인 후 복사

2、class 类名绑定。有两种方式,使用模板字符串或者使用数组。

// 模板字符串
<div className={ `header ${ isBg ? &#39;headerBg&#39; : &#39;&#39; }` }>header</div>
// 数组
<div class={ [ &#39;header&#39;, isBg && &#39;headerBg&#39; ] } >header</div>
로그인 후 복사

3、style 样式绑定。需要使用双大括号。

const color = &#39;red&#39;
const element = <sapn style={{ color, fontSize: &#39;16px&#39; }}>style</sapn>
로그인 후 복사

4、条件渲染。由于 jsx 本身具有 js 语法,所以不再需要使用 v-if 指令,使用 if/else 和三元表达式都可以实现。但是支持 v-show 指令。

const element = (name) => {
  if (name) {
    return <h1>Hello, { name }</h1>
  } else {
    return <h1>Hello, Stranger</h1>
  }
}

const element = icon ? <span class="icon"></span> : null;
// 以上代码等效于:
const element = icon && <span class="icon"></span>;
로그인 후 복사

5、列表渲染。同样,由于 jsx 本身具有 js 语法,所以不再需要使用 v-for 指令,使用 JS 数组的 map 方法即可。

const listData = [
   {name: &#39;Tom&#39;, age: 18},
   {name: &#39;Jim&#39;, age: 20},
   {name: &#39;Lucy&#39;, age: 16}
]
return () => (
   <div>
     <div class={&#39;box&#39;}>
       <span>姓名</span>
       <span>年龄</span>
     </div>
   {
   prop.listData.map(item => <div class={&#39;box&#39;}>
       <span>{item.name}</span>
       <span>{item.age}</span>
     </div>
     })
   </div>
)
로그인 후 복사

6、标签属性绑定。也是使用大括号包裹,不能使用 v-bind 指令。而 vue 组件中通过 <div v-bind="properties"></div> 批量绑定标签属性,在 JSX 中需要使用 <div {...properties}></div>

const href = &#39;https://cn.vuejs.org/&#39;
const element = <a href={href}>Vue3</a>
로그인 후 복사

7、事件绑定。使用的也是 单大括号 {},不过事件绑定不是以 @为前缀了,而是改成了 on,与原生相同。例如:click 事件是 onClick 或 onclick。

const confirm = () => {
  // 确认提交
}
<button onClick={confirm}>确定</button>
로그인 후 복사

如果要带参数,需要使用箭头函数进行包裹:

const confirm = (name) => {
  // 确认提交
}
<button onClick={() => confirm(&#39;Are you sure&#39;)}>确定</button>
로그인 후 복사

8、事件修饰符。需要使用 withModifiers 方法,接收两个参数,第一个参数是绑定的事件,第二个参数是需要使用的事件修饰符。

import { withModifiers, defineComponent, ref } from &#39;vue&#39;

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={ withModifiers(inc, [&#39;self&#39;]) }>{ count.value }</div>
    );
  },
})
export default App
로그인 후 복사

注意:Vue 模板中 ref 变量是可以直接解构的,但是在 jsx 中不行,需要添加 .value,比如上面的 { count.value }。

9、v-model 双向绑定。需要使用单大括号 {}。如果绑定属性则需要一个数组,第一个元素为绑定的值,第二个元素为绑定的属性。

// 绑定值
<input v-model="show" /> // vue
<input v-model={show.value} /> // jsx

// 绑定属性
<input v-model:prop="show" /> // vue
<input v-model={[show.value,&#39;prop&#39;]} /> // jsx

// 修饰符写法
<input v-model:prop.trim="show" /> // vue
<input v-model={[show.value,&#39;prop&#39;,[&#39;trim&#39;]]} /> // jsx
로그인 후 복사

10、slot 插槽。jsx/tsx 中无法使用 slot 标签,定义插槽方式一:通过 setup 函数的第一个参数 ctx 上下文对象的 slots 的属性,setup 函数默认接收两个参数:

  • props - 组件传入的参数对象。
  • ctx - 上下文对象,上下文对象暴露了其他一些在 setup 中可能会用到的值,包括:
    • attrs - 透传的 Attributes(非响应式的对象,等价于 $attrs)。
    • slots - 插槽(非响应式的对象,等价于 $slots)。
    • emit - 触发事件的函数(等价于 $emit)。
    • expose - 暴露公共属性的函数。

如果解构了 props 对象,解构出的变量将会丢失响应性,因此推荐通过 props.xxx 的形式来使用其中的 props。如果确实需要解构 props 对象,或者需要将某个 prop 传到一个外部函数中并保持响应性,可以使用 toRefs()toRef() 这两个工具函数:

import { toRefs, toRef } from &#39;vue&#39;

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象,然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者,将 `props` 的单个属性转为一个 ref
    const title = toRef(props, &#39;title&#39;)
  }
}
로그인 후 복사

ctx 上下文对象是非响应式的,可以安全地解构:

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}
로그인 후 복사

attrs 和 slots 都是响应式(有状态)的对象,它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们,并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外,和 props 不同,attrs 和 slots 的属性都不是响应式的。如果想要基于 attrs 或 slots 的改变来执行副作用,那么应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose 函数用于显式地限制该组件暴露出的属性,当父组件通过模板引用访问该组件的实例时,将仅能访问 expose 函数暴露出的内容:

export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}
로그인 후 복사

通过 ctx 上下文对象的 slots 的属性可以获取插槽对象后,就可以定义插槽了。

import { defineComponent } from &#39;vue&#39;

export default defineComponent({
  setup(props, { slots }) { // 逻辑
    return () => {
      return <p>
     <button>{ slots.test?.() }</button>
     <button>{ slots.default?.() }</button>
     </p>
    }
  },
})

// 在引用的组件中
<template #test>slot-test</template>
<template #>slot-default</template>
로그인 후 복사

定义插槽方式二:使用 renderSlot 函数。

import { renderSlot } from &#39;vue&#39;

<button>
  { renderSlot(slots, &#39;default&#39;) }
</button>
로그인 후 복사

而如果在 jsx 中使用插槽,可以直接通过标签属性 slot,或通过 v-slots 指令。

import HelloWorld from &#39;./HelloWorld&#39;  
export default defineComponent({  
    setup() {  
        return () => (  
            <div class={&#39;box&#39;}>  
                <HelloWorld v-slots={{  
                    title: () => {  
                        return <p>我是title插槽</p>  
                    },  
                    default: () => {  
                        return <p>我是default插槽</p>  
                    }  
                }} />  
            </div>  
        )  
    }  
})
로그인 후 복사

11、CSS Modules。引入局部样式,相当于 vue 组件中 <style> 标签的 scoped 属性。

import styles from &#39;./index.module.scss&#39;

<div class={styles.wrap}></div>
로그인 후 복사

GitHub 源码

(学习视频分享:vuejs入门教程编程基础视频

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

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿