企业官网建设流程全解析

网站 设计工具,湖州营销网站建设,设计的网站有哪些,个人主题网站做的步骤Vue3的script setup语法糖简化了Composition API的使用#xff0c;主要特点包括#xff1a;自动暴露顶级变量给模板组件自动注册使用defineProps/defineEmits声明属性和事件通过defineExpose暴露方法它显著减少了样板代码#xff0c;支持TypeScript类型推断和顶层aw…Vue3的script setup语法糖简化了Composition API的使用主要特点包括自动暴露顶级变量给模板组件自动注册使用defineProps/defineEmits声明属性和事件通过defineExpose暴露方法它显著减少了样板代码支持TypeScript类型推断和顶层await使组件开发更简洁高效。相比传统Options APIscript setup代码量减少约30%更适合现代JavaScript开发模式是Vue3项目的推荐写法尤其适合需要良好类型支持和追求开发效率的场景。script setupscript setup是Vue 3 中编写单文件组件SFC的编译时语法糖它让 Composition API 的代码更加简洁、直观。这是 Vue 3 最重要的开发体验改进之一。基本语法vue!-- 传统 Options API -- script export default { data() { return { count: 0 } }, methods: { increment() { this.count } } } /script !-- 使用 script setup -- script setup import { ref } from vue const count ref(0) const increment () { count.value } /script template button clickincrement{{ count }}/button /template可以看到代码量显著减少更符合 JavaScript 的自然写法。核心特性1.顶级变量自动暴露给模板在script setup中声明的所有顶级变量包括导入的都会自动暴露给模板无需return。vuescript setup import { ref } from vue import MyComponent from ./MyComponent.vue // 自动暴露给模板 const count ref(0) const message Hello Vue 3! const doubleCount computed(() count.value * 2) function increment() { count.value } /script template !-- 所有顶级变量都可以直接使用 -- MyComponent / h1{{ message }}/h1 p{{ count }} x 2 {{ doubleCount }}/p button clickincrement1/button /template2.组件自动注册导入的组件无需在components选项中注册可以直接在模板中使用。vuescript setup // 导入后直接可用 import Button from ./Button.vue import Modal from ./Modal.vue import Icon from ./Icon.vue /script template Button点击/Button Modal / Icon nameuser / /template3.定义 Props 和 Emits使用defineProps和defineEmits编译器宏来声明vuescript setup // 定义 Props const props defineProps({ title: { type: String, required: true }, count: { type: Number, default: 0 } }) // 定义 Emits两种方式 // 方式1数组形式 const emit defineEmits([update:title, submit]) // 方式2对象形式可添加验证 const emit defineEmits({ update:title: (value) { return typeof value string }, submit: null // 无需验证 }) // 触发事件 const updateTitle () { emit(update:title, 新标题) } /script template h1{{ title }}/h1 p计数: {{ count }}/p /template4.使用defineExpose暴露组件方法默认情况下script setup中的变量是私有的。如果需要父组件访问需要使用defineExpose!-- Child.vue -- script setup import { ref } from vue const count ref(0) const reset () { count.value 0 } // 只暴露 reset 方法count 保持私有 defineExpose({ reset }) /script !-- Parent.vue -- script setup import { ref, onMounted } from vue import Child from ./Child.vue const childRef ref(null) onMounted(() { // 只能访问暴露的方法 childRef.value?.reset() // ✅ 可以调用 console.log(childRef.value?.count) // ❌ undefined私有 }) /script template Child refchildRef / /template5.使用useSlots和useAttrsscript setup import { useSlots, useAttrs } from vue // 访问插槽 const slots useSlots() // 访问非 props 的属性class, style, 自定义属性等 const attrs useAttrs() console.log(slots.default) // 默认插槽内容 console.log(attrs.class) // 传递的 class /script高级用法1.与 TypeScript 完美集成script setup langts // 使用类型声明 Props 和 Emits interface Props { title: string count?: number } interface Emits { (e: update:title, value: string): void (e: submit): void } // 带类型的 Props const props withDefaults(definePropsProps(), { count: 0 }) // 带类型的 Emits const emit defineEmitsEmits() // 自动类型推断 const doubleCount computed(() (props.count || 0) * 2) /script2.顶层awaitscript setup支持顶层await结果会自动编译成async setup()。vuescript setup // 直接使用 await无需包装 const user await fetchUser() const posts await fetchPosts() // 甚至可以在模板中使用 const data await fetchData() /script template div v-ifdata {{ data }} /div /template3.动态组件vuescript setup import { shallowRef } from vue import Home from ./Home.vue import About from ./About.vue import Contact from ./Contact.vue const components { Home, About, Contact } const currentTab shallowRef(Home) const currentComponent computed(() components[currentTab.value]) /script template button v-fortab in Object.keys(components) :keytab clickcurrentTab tab {{ tab }} /button component :iscurrentComponent / /template4.组合式函数的使用script setup import { useMouse, useLocalStorage } from ./composables // 直接使用组合式函数 const { x, y } useMouse() const { value: theme } useLocalStorage(theme, light) // 组合多个功能 const { data, loading, error, fetchData } useFetch(/api/data) /script与传统script的对比特性script setup传统script代码量更简洁减少 ~30%需要更多的样板代码组件注册自动注册无需components选项需要在components中注册暴露变量自动暴露顶级变量需要从setup()中返回Props/Emits使用defineProps/defineEmits编译器宏使用props和emits选项TypeScript更好的类型推断和集成类型支持有限顶层 await支持不支持学习曲线对 React Hooks 用户更友好对 Vue 2 用户更熟悉常见问题和解决方案问题1需要访问组件实例vuescript setup import { getCurrentInstance } from vue // 获取当前组件实例谨慎使用 const instance getCurrentInstance() // 访问全局属性 console.log(instance.appContext.config.globalProperties.$router) // 尽量使用 Composition API 替代 // 例如使用 useRouter() 而不是 this.$router /script问题2与 Options API 混用vue!-- 可以同时使用但不推荐 -- script export default { inheritAttrs: false } /script script setup // Composition API 代码 /script问题3Props 的响应式解构vuescript setup import { toRefs } from vue const props defineProps({ user: Object, active: Boolean }) // ❌ 错误直接解构会丢失响应式 const { user, active } props // ✅ 正确使用 toRefs 保持响应式 const { user, active } toRefs(props) // 或者使用 computed const userName computed(() props.user?.name) /script最佳实践1.统一使用script setup在新项目中默认使用script setup保持代码风格统一。2.合理组织代码顺序script setup // 1. 导入依赖 import { ref, computed } from vue import { useRouter } from vue-router // 2. 组件导入 import Button from ./Button.vue import Modal from ./Modal.vue // 3. Props/Emits 定义 const props defineProps(/* ... */) const emit defineEmits(/* ... */) // 4. 组合式函数调用 const router useRouter() const { data, fetch } useFetch() // 5. 响应式状态 const count ref(0) const form reactive({/* ... */}) // 6. 计算属性 const doubleCount computed(() count.value * 2) // 7. 方法函数 const handleSubmit async () { // ... } // 8. 生命周期/侦听器 onMounted(() { fetch() }) // 9. 暴露给父组件的方法 defineExpose({ submit: handleSubmit }) /script3.为复杂组件使用组合式函数当组件逻辑复杂时将其拆分为组合式函数script setup // 将复杂逻辑抽离 import { useUserManagement } from ./composables/useUserManagement import { useFormValidation } from ./composables/useFormValidation const { users, loading, error, fetchUsers, deleteUser } useUserManagement() const { form, errors, validate, resetForm } useFormValidation() /script总结script setup是 Vue 3 的重大改进它主要优势✅代码更简洁减少样板代码提高开发效率✅类型支持更好与 TypeScript 完美集成✅自动暴露无需手动返回模板使用的变量✅组件自动注册导入即用✅更符合现代 JS 习惯像写普通 JavaScript 一样写 Vue需要注意学习新的 APIdefineProps、defineEmits、defineExpose需要了解响应式保持使用toRefs部分 Options API 概念需要转换思维适用场景所有新的 Vue 3 项目使用 Composition API 的组件需要良好 TypeScript 支持的项目希望减少样板代码提高开发效率script setup代表了 Vue 组件编写的未来方向是 Vue 3 开发的首选方式。虽然一开始需要适应新的语法但一旦习惯你会发现自己再也回不去传统的写法了