企业官网建设流程全解析

用电脑建设个人网站 并用手机访问,东莞三网合一网站制作,柚子皮 wordpress,重庆装修网Vue3的script setup语法相比传统Options API写法更加简洁高效。它通过编译宏如defineProps、defineEmits等替代了defineComponent#xff0c;减少了样板代码#xff0c;同时提供更好的TypeScript支持。在script setup中#xff0c;响应式数据、方法、生命周…Vue3的script setup语法相比传统Options API写法更加简洁高效。它通过编译宏如defineProps、defineEmits等替代了defineComponent减少了样板代码同时提供更好的TypeScript支持。在script setup中响应式数据、方法、生命周期等都可以直接编写代码组织更接近Composition API逻辑。虽然仍支持与Options API混用但推荐使用纯script setup写法这是Vue3推荐的开发方式能自动编译为组件选项使开发更加高效简洁。在script setup中不需要使用defineComponent传统写法 vsscript setup1.传统 Options API 写法!-- 需要 defineComponent -- script langts import { defineComponent } from vue; export default defineComponent({ name: MyComponent, props: { title: String }, data() { return { count: 0 }; }, methods: { increment() { this.count; } } }); /script2.使用script setup推荐!-- 不需要 defineComponent -- script setup langts import { ref } from vue; // Props 定义 const props defineProps{ title: string; }(); // 响应式数据 const count ref(0); // 方法 const increment () { count.value; }; /scriptscript setup中的替代 API1.定义 Propsscript setup langts // 方式1使用泛型推荐 defineProps{ title: string; count?: number; items: string[]; }(); // 方式2使用运行时声明 defineProps({ title: String, count: { type: Number, default: 0 } }); // 方式3混合使用Vue 3.3 interface Props { title: string; count?: number; } definePropsProps(); /script2.定义 Emitsscript setup langts // 方式1使用泛型 const emit defineEmits{ (e: update, value: string): void; (e: submit, payload: { id: number }): void; }(); // 方式2数组形式 const emit defineEmits([update, submit]); // 方式3对象形式带验证 const emit defineEmits({ update: (value: string) typeof value string, submit: (payload: { id: number }) payload.id 0 }); /script3.定义 Slots 和 Attrsscript setup langts import { useSlots, useAttrs } from vue; const slots useSlots(); const attrs useAttrs(); /script4.定义 Exposescript setup langts import { ref } from vue; const inputRef refHTMLInputElement(); // 暴露给父组件的方法 defineExpose({ focus: () inputRef.value?.focus(), clear: () { if (inputRef.value) inputRef.value.value ; } }); /script为什么不需要defineComponentscript setup的优势自动编译script setup会在编译时转换为正常的组件选项更简洁减少样板代码更好的类型推断TypeScript 支持更好更直观代码组织更接近 Composition API 的逻辑编译对比// script setup 代码 script setup langts const count ref(0); /script // 编译后的结果 ≈ script langts import { defineComponent, ref } from vue; export default defineComponent({ setup() { const count ref(0); return { count }; } }); /script特殊情况处理1.如果需要组件名用于调试或递归组件!-- 方式1使用两个 script 标签 -- script langts export default { name: MyComponent }; /script script setup langts // Composition API 代码 const count ref(0); /script !-- 方式2使用插件Vue 3.3 -- script setup langts defineOptions({ name: MyComponent, inheritAttrs: false }); /script2.混合使用 Options API虽然不推荐但如果需要script setup langts // Composition API 部分 const count ref(0); /script script langts import { defineComponent } from vue; // Options API 部分 export default defineComponent({ name: MyComponent, // 这里可以添加 computed, watch 等 computed: { doubled() { // 注意无法直接访问 setup 中的变量 return 0; } } }); /script完整示例template div h1{{ title }}/h1 p计数: {{ count }}/p button clickincrement增加/button button clickhandleSubmit提交/button /div /template script setup langts import { ref, onMounted } from vue; // Props interface Props { title: string; initialCount?: number; } const props withDefaults(definePropsProps(), { initialCount: 0 }); // Emits const emit defineEmits{ (e: update:count, value: number): void; (e: submit, payload: { count: number }): void; }(); // 状态 const count ref(props.initialCount); // 方法 const increment () { count.value; emit(update:count, count.value); }; const handleSubmit () { emit(submit, { count: count.value }); }; // 生命周期 onMounted(() { console.log(组件已挂载); }); // 暴露给父组件 defineExpose({ reset: () { count.value 0; } }); /script style scoped /* 样式 */ /style总结在script setup中✅不需要defineComponent✅ 使用defineProps、defineEmits、defineExpose等编译宏✅ 代码更简洁类型支持更好✅ 是 Vue 3 的推荐写法只有在使用传统 Options API 写法时才需要defineComponent而script setup是 Composition API 的语法糖会自动处理这些。