Babel Plugin JSX for Vue——模具行业从业者必备知识手册

system 2

<h2>Babel Plugin JSX for Vue 3</h2>

<p>To add Vue JSX support.</p>

<p>English | <a href="/packages/babel-plugin-jsx/README-zh_CN.md">简体中文</a></p>

<h3>Installation</h3>

<p>Install the plugin with:</p>

<pre><code>
npm install @vue/babel-plugin-jsx -D
</code></pre>

<p>Then add the plugin to your babel config:</p>

<pre><code>
{
"plugins": ["@vue/babel-plugin-jsx"]
}
</code></pre>

<h3>Usage</h3>

<h4>options</h4>

<p>#### transformOn</p>

<p>Type: <code>boolean</code></p>

<p>Default: <code>false</code></p>

<p>transform <code>on: { click: xx }</code> to <code>onClick: xxx</code></p>

<p>#### optimize</p>

<p>Type: <code>boolean</code></p>

<p>Default: <code>false</code></p>

<p>When enabled, this plugin generates optimized runtime code using <a href="https://vuejs.org/guide/extras/rendering-mechanism#patch-flags"><code>PatchFlags</code></a> and <a href="https://github.com/vuejs/core/blob/v3.5.13/packages/runtime-core/src/componentSlots.ts#L69-L77"><code>SlotFlags</code></a> to improve rendering performance. However, due to JSX's dynamic nature, the optimizations are not as comprehensive as those in Vue's official template compiler.</p>

<p>Since the optimized code may skip certain re-renders to improve performance, we strongly recommend thorough testing of your application after enabling this option to ensure everything works as expected.</p>

<p>#### isCustomElement</p>

<p>Type: <code>(tag: string) => boolean</code></p>

<p>Default: <code>undefined</code></p>

<p>configuring custom elements</p>

<p>#### mergeProps</p>

<p>Type: <code>boolean</code></p>

<p>Default: <code>true</code></p>

<p>merge static and dynamic class / style attributes / onXXX handlers</p>

<p>#### enableObjectSlots</p>

<p>Type: <code>boolean</code></p>

<p>Default: <code>true</code></p>

<p>Whether to enable <code>object slots</code> (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of <code>_isSlot</code> condition expressions which increase your bundle size. And <code>v-slots</code> is still available even if <code>enableObjectSlots</code> is turned off.</p>

<p>#### pragma</p>

<p>Type: <code>string</code></p>

<p>Default: <code>createVNode</code></p>

<p>Replace the function used when compiling JSX expressions.</p>

<p>#### resolveType</p>

<p>Type: <code>boolean</code></p>

<p>Default: <code>false</code></p>

<p>(<strong>Experimental</strong>) Infer component metadata from types (e.g. <code>props</code>, <code>emits</code>, <code>name</code>). This is an experimental feature and may not work in all cases.</p>

<h3>Syntax</h3>

<h4>Content</h4>

<p>functional component</p>

<pre><code>
const App = () => <div>Vue 3.0</div>;
</code></pre>

<p>with render</p>

<pre><code>
const App = {
render() {
return <div>Vue 3.0</div>;
},
};
</code></pre>

<pre><code>
import { withModifiers, defineComponent } from 'vue';

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

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

return () => (
  <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
);

},
});
</code></pre>

<p>Fragment</p>

<pre><code>
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
</code></pre>

<h4>Attributes / Props</h4>

<pre><code>
const App = () => <input type="email" />;
</code></pre>

<p>with a dynamic binding:</p>

<pre><code>
const placeholderText = 'email';
const App = () => <input type="email" placeholder={placeholderText} />;
</code></pre>

<h4>Directives</h4>

<pre><code>
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};
</code></pre>

<p>#### v-model</p>

<blockquote>
<p>Note: You should pass the second param as string for using <code>arg</code>.</p>
</blockquote>

<pre><code>
<A v-model={[val, 'argument', ['modifier']]} />
// Or
<input v-model:ar

踩过坑的来评论区说说。
</code></pre>