387 lines
7.1 KiB
Markdown
Raw Normal View History

2020-07-02 13:30:17 +08:00
# Vue 3 Babel JSX 插件
2023-06-22 12:14:02 +08:00
[![npm package](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
[![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-orange?style=flat-square)](https://github.com/actions-cool/issues-helper)
2020-07-12 18:56:19 +08:00
2020-07-02 13:30:17 +08:00
以 JSX 的方式来编写 Vue 代码
[English](/packages/babel-plugin-jsx/README.md) | 简体中文
2020-07-02 13:30:17 +08:00
## 安装
安装插件
```bash
npm install @vue/babel-plugin-jsx -D
2020-07-02 13:30:17 +08:00
```
2021-01-09 21:18:32 +08:00
配置 Babel
2020-07-02 13:30:17 +08:00
```js
2020-07-02 13:30:17 +08:00
{
"plugins": ["@vue/babel-plugin-jsx"]
2020-07-02 13:30:17 +08:00
}
```
## 使用
### 参数
2020-07-29 12:37:37 +08:00
#### transformOn
Type: `boolean`
Default: `false`
2020-07-02 13:30:17 +08:00
`on: { click: xx }` 转成 `onClick: xxx`
2020-07-29 12:37:37 +08:00
#### optimize
Type: `boolean`
Default: `false`
开启此选项后JSX 插件会尝试使用 [`PatchFlags`](https://cn.vuejs.org/guide/extras/rendering-mechanism#patch-flags) 和 [`SlotFlags`](https://github.com/vuejs/core/blob/v3.5.13/packages/runtime-core/src/componentSlots.ts#L69-L77) 来优化运行时代码从而提升渲染性能。需要注意的是JSX 的灵活性远高于模板语法,这使得编译优化的可能性相对有限,其优化效果会比 Vue 官方模板编译器更为有限。
优化后的代码会选择性地跳过一些重渲染操作以提高性能。因此,建议在开启此选项后对应用进行完整的测试,确保所有功能都能正常工作。
2020-07-29 12:37:37 +08:00
#### isCustomElement
Type: `(tag: string) => boolean`
2020-07-02 13:30:17 +08:00
2020-07-29 12:37:37 +08:00
Default: `undefined`
2020-07-02 13:30:17 +08:00
2020-07-29 12:37:37 +08:00
自定义元素
2020-07-02 13:30:17 +08:00
2020-09-14 17:42:03 +08:00
#### mergeProps
Type: `boolean`
Default: `true`
合并 class / style / onXXX handlers
2021-01-09 21:18:32 +08:00
#### enableObjectSlots
使用 `enableObjectSlots` (文档下面会提到)。虽然在 JSX 中比较好使,但是会增加一些 `_isSlot` 的运行时条件判断,这会增加你的项目体积。即使你关闭了 `enableObjectSlots``v-slots` 还是可以使用
#### pragma
Type: `string`
Default: `createVNode`
2022-06-23 12:05:00 +08:00
替换编译 JSX 表达式的时候使用的函数
2024-01-21 17:38:29 +08:00
#### resolveType
Type: `boolean`
Default: `false`
(**Experimental**) Infer component metadata from types (e.g. `props`, `emits`, `name`). This is an experimental feature and may not work in all cases.
2020-07-03 00:51:53 +08:00
## 表达式
### 内容
2021-01-09 21:18:32 +08:00
2020-07-03 00:51:53 +08:00
函数式组件
```jsx
const App = () => <div></div>;
2020-07-03 00:51:53 +08:00
```
在 render 中使用
```jsx
const App = {
render() {
return <div>Vue 3.0</div>;
2021-01-09 21:18:32 +08:00
},
};
2020-07-03 00:51:53 +08:00
```
```jsx
2023-06-22 12:14:02 +08:00
import { withModifiers, defineComponent } from 'vue';
2020-07-03 00:51:53 +08:00
2020-09-01 10:14:36 +08:00
const App = defineComponent({
setup() {
const count = ref(0);
2020-07-22 09:53:16 +08:00
2020-09-01 10:14:36 +08:00
const inc = () => {
count.value++;
};
2020-07-22 09:53:16 +08:00
2020-09-01 10:14:36 +08:00
return () => (
2023-06-22 12:14:02 +08:00
<div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
2020-09-01 10:14:36 +08:00
);
2021-01-09 21:18:32 +08:00
},
2020-09-01 10:14:36 +08:00
});
2020-07-22 09:53:16 +08:00
```
2020-07-03 00:51:53 +08:00
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
2020-07-03 00:51:53 +08:00
```
### Attributes / Props
2020-07-03 00:51:53 +08:00
```jsx
const App = () => <input type="email" />;
2020-07-03 00:51:53 +08:00
```
动态绑定:
2020-07-03 00:51:53 +08:00
```jsx
2023-06-22 12:14:02 +08:00
const placeholderText = 'email';
2021-01-09 21:18:32 +08:00
const App = () => <input type="email" placeholder={placeholderText} />;
2020-07-03 00:51:53 +08:00
```
### 指令
2021-09-30 07:18:36 +08:00
#### v-show
2020-07-03 00:51:53 +08:00
```jsx
const App = {
data() {
return { visible: true };
},
render() {
2020-07-22 09:23:23 +08:00
return <input v-show={this.visible} />;
2020-07-03 00:51:53 +08:00
},
};
```
2021-09-30 07:18:36 +08:00
#### v-model
2020-07-03 00:51:53 +08:00
2020-07-15 09:22:27 +08:00
> 注意:如果想要使用 `arg`, 第二个参数需要为字符串
2020-07-03 00:51:53 +08:00
```jsx
2020-07-22 09:23:23 +08:00
<input v-model={val} />
2020-07-03 00:51:53 +08:00
```
2021-09-30 07:18:36 +08:00
```jsx
<input v-model:argument={val} />
```
2020-07-13 23:44:52 +08:00
```jsx
2023-06-22 12:14:02 +08:00
<input v-model={[val, ['modifier']]} />
// 或者
<input v-model_modifier={val} />
2020-07-13 23:44:52 +08:00
```
```jsx
2023-06-22 12:14:02 +08:00
<A v-model={[val, 'argument', ['modifier']]} />
// 或者
<input v-model:argument_modifier={val} />
2020-07-13 23:44:52 +08:00
```
2022-06-23 12:05:00 +08:00
会编译成:
2020-07-13 23:44:52 +08:00
```js
h(A, {
2020-12-08 14:21:22 +08:00
argument: val,
argumentModifiers: {
2021-01-09 21:18:32 +08:00
modifier: true,
2020-07-13 23:44:52 +08:00
},
2023-06-22 12:14:02 +08:00
'onUpdate:argument': ($event) => (val = $event),
2021-01-09 21:18:32 +08:00
});
2020-12-08 14:21:22 +08:00
```
2021-09-30 07:18:36 +08:00
#### v-models (从 1.1.0 开始不推荐使用)
2020-12-08 14:21:22 +08:00
> 注意: 你应该传递一个二维数组给 v-models。
```jsx
2023-06-22 12:14:02 +08:00
<A v-models={[[foo], [bar, 'bar']]} />
2020-12-08 14:21:22 +08:00
```
```jsx
2021-01-09 21:18:32 +08:00
<A
v-models={[
2023-06-22 12:14:02 +08:00
[foo, 'foo'],
[bar, 'bar'],
2021-01-09 21:18:32 +08:00
]}
/>
2020-12-08 14:21:22 +08:00
```
```jsx
<A
v-models={[
2023-06-22 12:14:02 +08:00
[foo, ['modifier']],
[bar, 'bar', ['modifier']],
2020-12-08 14:21:22 +08:00
]}
/>
```
2022-06-23 12:05:00 +08:00
会编译成:
2020-12-08 14:21:22 +08:00
```js
h(A, {
modelValue: foo,
modelModifiers: {
modifier: true,
},
2023-06-22 12:14:02 +08:00
'onUpdate:modelValue': ($event) => (foo = $event),
2020-12-08 14:21:22 +08:00
bar: bar,
barModifiers: {
modifier: true,
},
2023-06-22 12:14:02 +08:00
'onUpdate:bar': ($event) => (bar = $event),
2021-01-09 21:18:32 +08:00
});
2020-07-13 23:44:52 +08:00
```
2022-06-23 12:05:00 +08:00
#### 自定义指令
2020-07-03 00:51:53 +08:00
2021-09-30 07:18:36 +08:00
只有 argument 的时候推荐使用
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom:arg={val} />;
},
};
```
2020-07-03 00:51:53 +08:00
```jsx
const App = {
directives: { custom: customDirective },
setup() {
2023-06-22 12:14:02 +08:00
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
2020-07-03 00:51:53 +08:00
},
};
2020-07-03 00:51:53 +08:00
```
2021-01-09 21:18:32 +08:00
### 插槽
2020-07-03 00:51:53 +08:00
2021-01-09 21:18:32 +08:00
> 注意: 在 `jsx` 中,应该使用 **`v-slots`** 代替 _`v-slot`_
2020-07-11 23:14:18 +08:00
```jsx
const A = (props, { slots }) => (
<>
2023-06-22 12:14:02 +08:00
<h1>{slots.default ? slots.default() : 'foo'}</h1>
<h2>{slots.bar?.()}</h2>
</>
);
const App = {
setup() {
const slots = {
bar: () => <span>B</span>,
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
2021-01-09 21:18:32 +08:00
},
};
// or
2020-07-11 23:14:18 +08:00
const App = {
setup() {
const slots = {
2020-07-22 09:53:16 +08:00
default: () => <div>A</div>,
bar: () => <span>B</span>,
};
2020-07-22 09:23:23 +08:00
return () => <A v-slots={slots} />;
2021-01-09 21:18:32 +08:00
},
};
2020-12-07 23:17:45 +08:00
2021-12-21 11:11:37 +08:00
// 或者,当 `enableObjectSlots` 不是 `false` 时,您可以使用对象插槽
2020-12-07 23:17:45 +08:00
const App = {
setup() {
return () => (
<>
<A>
2020-12-13 11:48:41 +08:00
{{
2020-12-07 23:17:45 +08:00
default: () => <div>A</div>,
bar: () => <span>B</span>,
2020-12-13 11:48:41 +08:00
}}
2020-12-07 23:17:45 +08:00
</A>
2023-06-22 12:14:02 +08:00
<B>{() => 'foo'}</B>
2020-12-07 23:17:45 +08:00
</>
);
2021-01-09 21:18:32 +08:00
},
};
2020-07-11 23:14:18 +08:00
```
2020-07-03 00:51:53 +08:00
2021-09-30 07:18:36 +08:00
### 在 TypeScript 中使用
2020-09-01 10:14:36 +08:00
`tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "preserve"
}
}
```
2022-06-23 12:05:00 +08:00
## 谁在使用
2020-07-09 21:16:10 +08:00
<table>
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://www.antdv.com/">
<img
width="32"
2023-12-11 01:36:30 +08:00
src="https://github.com/vuejs/babel-plugin-jsx/assets/6481596/8d604d42-fe5f-4450-af87-97999537cd21"
2020-07-09 21:16:10 +08:00
/>
<br>
<strong>Ant Design Vue</strong>
</a>
</td>
<td align="center">
2020-07-09 21:36:13 +08:00
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
2020-07-09 21:16:10 +08:00
<img
width="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://img.yzcdn.cn/vant/logo.png"
/>
<br>
<strong>Vant</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/element-plus/element-plus">
<img
height="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png"
/>
<br>
<strong>Element Plus</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/leezng/vue-json-pretty">
<img
height="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://raw.githubusercontent.com/leezng/vue-json-pretty/master/static/logo.svg"
/>
<br>
<strong>Vue Json Pretty</strong>
</a>
</td>
2020-07-09 21:16:10 +08:00
</tr>
</tbody>
</table>
2020-07-02 13:30:17 +08:00
## 兼容性
要求:
- **Babel 7+**
- **Vue 3+**