const{Fragment:n,jsx:e,jsxs:t}=arguments[0];function _createMdxContent(o){const l={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o.components};return t(n,{children:[e(l.h2,{children:"引言：解锁 Vue 3 的无限潜能"}),"\n",t(l.p,{children:["Vue 3 不仅带来了 Composition API 的革命性变化，还引入了许多高级特性和开发技巧。从 JSX/TSX 的灵活渲染到 ",e(l.code,{children:"defineModel"}),"、",e(l.code,{children:"defineSlots"})," 等新特性，这些工具让我们能够构建更加强大、类型安全且易于维护的应用。"]}),"\n",e(l.p,{children:"本文将通过实际案例，带你深入了解这些高级特性的使用方法和最佳实践。"}),"\n",e(l.h2,{children:"1. JSX/TSX 在 Vue 3 中的应用"}),"\n",e(l.h3,{children:"1.1 配置 JSX/TSX 支持"}),"\n",e(l.p,{children:"首先，我们需要配置项目以支持 JSX/TSX："}),"\n",e(l.pre,{children:e(l.code,{className:"language-bash",children:"# 安装必要的依赖\npnpm add @vitejs/plugin-vue-jsx\n"})}),"\n",t(l.p,{children:["更新 ",e(l.code,{children:"vite.config.ts"}),"："]}),"\n",e(l.pre,{children:e(l.code,{className:"language-ts",children:"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\n\nexport default defineConfig({\n plugins: [\n vue(),\n vueJsx(), // 启用 JSX 支持\n ],\n})\n"})}),"\n",e(l.h3,{children:"1.2 基础 JSX 语法"}),"\n",e(l.p,{children:"在 Vue 3 中，JSX 提供了更灵活的渲染方式："}),"\n",e(l.pre,{children:e(l.code,{className:"language-tsx",children:"// components/Button.tsx\nimport { defineComponent, type PropType } from 'vue'\n\ninterface ButtonProps {\n type?: 'primary' | 'secondary' | 'danger'\n size?: 'sm' | 'md' | 'lg'\n disabled?: boolean\n onClick?: () => void\n}\n\nexport default defineComponent({\n name: 'Button',\n props: {\n type: {\n type: String as PropType,\n default: 'primary'\n },\n size: {\n type: String as PropType,\n default: 'md'\n },\n disabled: {\n type: Boolean,\n default: false\n }\n },\n emits: ['click'],\n setup(props, { emit, slots }) {\n const handleClick = () => {\n if (!props.disabled) {\n emit('click')\n }\n }\n\n return () => (\n \n {slots.default?.()}\n \n )\n }\n})\n"})}),"\n",e(l.h3,{children:"1.3 条件渲染与列表渲染"}),"\n",e(l.p,{children:"JSX 中的条件渲染和列表渲染更接近原生 JavaScript："}),"\n",e(l.pre,{children:e(l.code,{className:"language-tsx",children:"// components/TodoList.tsx\nimport { defineComponent, ref, computed } from 'vue'\n\ninterface Todo {\n id: number\n text: string\n completed: boolean\n}\n\nexport default defineComponent({\n name: 'TodoList',\n setup() {\n const todos = ref([\n { id: 1, text: '学习 Vue 3', completed: false },\n { id: 2, text: '掌握 JSX', completed: true },\n { id: 3, text: '构建项目', completed: false }\n ])\n\n const newTodo = ref('')\n\n const completedCount = computed(() => \n todos.value.filter(todo => todo.completed).length\n )\n\n const addTodo = () => {\n if (newTodo.value.trim()) {\n todos.value.push({\n id: Date.now(),\n text: newTodo.value,\n completed: false\n })\n newTodo.value = ''\n }\n }\n\n const toggleTodo = (id: number) => {\n const todo = todos.value.find(t => t.id === id)\n if (todo) {\n todo.completed = !todo.completed\n }\n }\n\n return () => (\n

Todo List ({completedCount.value}/{todos.value.length} 完成)

\n \n

\n {\n if (e.key === 'Enter') addTodo()\n }}\n />\n \n

\n\n

\n toggleTodo(todo.id)}\n />\n {todo.text}\n {todo.completed && ✓}\n

\n\n {todos.value.length === 0 && (\n

暂无任务

\n )}\n

\n )\n }\n})\n"})}),"\n",e(l.h2,{children:"2. defineModel - 双向绑定的新方式"}),"\n",t(l.p,{children:[e(l.code,{children:"defineModel"})," 是 Vue 3.4+ 引入的新特性，简化了组件的双向绑定："]}),"\n",e(l.pre,{children:e(l.code,{className:"language-vue",children:'\x3c!-- components/CustomInput.vue --\x3e\n

Vue 3 高级特性与 JSX/TSX 开发实战指南