衡阳衡阳县网站建设,网站 前台后台,单页网站如何做,网站怎么无法访问下面#xff0c;我们来系统的梳理关于 Vue 3 script setup 语法糖 的基本知识点#xff1a; 一、script setup 核心概念
1.1 什么是 script setup#xff1f;
script setup 是 Vue 3 中 Composition API 的编译时语法糖#xff0c;它通过…下面我们来系统的梳理关于 Vue 3 script setup 语法糖 的基本知识点 一、script setup 核心概念
1.1 什么是 script setup
script setup 是 Vue 3 中 Composition API 的编译时语法糖它通过简化组件声明方式显著减少样板代码提供更符合直觉的开发体验。
1.2 设计目标与优势
目标实现方式优势减少样板代码自动暴露顶层绑定代码更简洁提升开发体验更自然的响应式写法开发更高效更好的类型支持原生 TypeScript 集成类型安全编译时优化编译阶段处理运行时更高效逻辑组织组合式 API 原生支持关注点分离
1.3 与传统语法对比
!-- 选项式 API --
script
export default {props: [message],data() {return { count: 0 }},methods: {increment() {this.count}}
}
/script!-- Composition API 标准 --
script
import { ref } from vueexport default {props: [message],setup(props) {const count ref(0)function increment() {count.value}return { count, increment }}
}
/script!-- script setup 语法糖 --
script setup
import { ref } from vueconst props defineProps([message])
const count ref(0)function increment() {count.value
}
/script二、核心语法与特性
2.1 基本结构
script setup
// 所有顶层绑定都自动暴露给模板
import { ref } from vue// 响应式状态
const count ref(0)// 函数
function increment() {count.value
}// 表达式
const double computed(() count.value * 2)
/scripttemplatebutton clickincrement{{ count }} ({{ double }})/button
/template2.2 编译器转换原理
输入
script setup
const msg Hello!
/script输出
script
export default {setup() {const msg Hello!return { msg } // 自动暴露所有顶层绑定}
}
/script2.3 自动暴露规则
所有 import 导入顶层变量声明 (const, let, var)顶层函数声明顶层 class 和 interface (TypeScript)
三、组件与指令使用
3.1 组件使用
script setup
// 1. 导入组件
import MyComponent from ./MyComponent.vue// 2. 自动注册无需components选项
/scripttemplate!-- 3. 直接在模板中使用 --MyComponent /
/template3.2 动态组件
script setup
import { shallowRef } from vue
import Home from ./Home.vue
import About from ./About.vueconst currentComponent shallowRef(Home)
/scripttemplatecomponent :iscurrentComponent /
/template3.3 自定义指令
script setup
// 命名规范vNameOfDirective
const vFocus {mounted: el el.focus()
}
/scripttemplateinput v-focus /
/template四、Props与Emit处理
4.1 声明Props
script setup
// 选项式声明
const props defineProps({title: String,count: {type: Number,required: true}
})// TypeScript接口声明
interface Props {title?: stringcount: number
}const props definePropsProps()
/script4.2 声明Emit事件
script setup
// 数组形式
const emit defineEmits([update, delete])// 对象形式带验证
const emit defineEmits({update: (payload: { id: number }) {return !!payload.id // 返回布尔值表示验证结果}
})// TypeScript类型声明
const emit defineEmits{(e: update, payload: { id: number }): void(e: delete, id: number): void
}()4.3 使用示例
script setup
const props defineProps([modelValue])
const emit defineEmits([update:modelValue])function handleInput(e) {emit(update:modelValue, e.target.value)
}
/scripttemplateinput :valuemodelValueinputhandleInput/
/template五、响应式与生命周期
5.1 响应式状态管理
script setup
import { ref, reactive, computed } from vue// 基本类型
const count ref(0)// 对象类型
const state reactive({items: [],loading: false
})// 计算属性
const total computed(() state.items.length)// 侦听器
watch(count, (newVal, oldVal) {console.log(Count changed: ${oldVal} → ${newVal})
})
/script5.2 生命周期钩子
script setup
import { onMounted, onUnmounted } from vueonMounted(() {console.log(Component mounted)fetchData()
})onUnmounted(() {console.log(Component unmounted)cleanup()
})
/script六、高级特性与模式
6.1 顶层await
script setup
const user ref(null)
const posts ref([])// 直接使用await - 自动编译为async setup()
const userData await fetchUser()
user.value userData// 结合watchEffect
watchEffect(async () {if (user.value) {posts.value await fetchPosts(user.value.id)}
})
/script6.2 使用插槽与上下文
script setup
import { useSlots, useAttrs } from vueconst slots useSlots()
const attrs useAttrs()// 访问默认插槽内容
const defaultSlotContent slots.default?.()
/script6.3 暴露组件实例
script setup
import { ref } from vueconst inputRef ref(null)// 暴露公共方法
function focusInput() {inputRef.value.focus()
}// 显式暴露
defineExpose({focusInput
})
/scripttemplateinput refinputRef
/template七、TypeScript集成
7.1 类型安全Props
script setup langts
interface Props {title: stringcount?: numberitems?: string[]
}const props definePropsProps()
/script7.2 泛型组件
script setup langts genericT
import { ref } from vueconst items refT[]([])
const selected refT()function addItem(item: T) {items.value.push(item)
}
/script7.3 类型标注Ref
script setup langts
import { ref } from vueinterface User {id: numbername: string
}// 显式类型标注
const user refUser | null(null)// 初始化时推断
const count ref(0) // Refnumber
/script八、最佳实践与组织模式
8.1 代码组织建议
script setup
// ----------------------------
// 1. 导入部分
// ----------------------------
import { ref, onMounted } from vue
import MyComponent from ./MyComponent.vue// ----------------------------
// 2. 定义Props/Emits
// ----------------------------
const props defineProps({ /* ... */ })
const emit defineEmits({ /* ... */ })// ----------------------------
// 3. 响应式状态
// ----------------------------
const count ref(0)
const state reactive({ /* ... */ })// ----------------------------
// 4. 计算属性和侦听器
// ----------------------------
const double computed(() count.value * 2)
watch(count, (val) { /* ... */ })// ----------------------------
// 5. 函数声明
// ----------------------------
function increment() { count.value }// ----------------------------
// 6. 生命周期钩子
// ----------------------------
onMounted(() { /* ... */ })// ----------------------------
// 7. 暴露API
// ----------------------------
defineExpose({ increment })
/script8.2 逻辑复用模式
script setup
// 使用自定义Hook
import { useCounter } from /composables/useCounterconst { count, increment } useCounter(10)
/script8.3 性能优化
script setup
// 1. 使用shallowRef减少大型对象的响应式开销
const bigData shallowRef(largeDataset)// 2. 使用markRaw避免不必要的响应式转换
const staticConfig markRaw({ /* 大型配置对象 */ })// 3. 合理使用computed缓存计算结果
const filteredList computed(() bigData.value.filter(item item.active)
)
/script九、常见问题与解决方案
9.1 响应式丢失问题
问题解构Props导致响应式丢失
script setup
const { title } defineProps([title]) // 失去响应性
/script解决方案
script setup
const props defineProps([title])
// 使用toRefs解构
const { title } toRefs(props)
/script9.2 命名冲突问题
问题导入组件与局部变量同名
script setup
import Button from ./Button.vue
const Button ref(null) // 命名冲突
/script解决方案
script setup
import Button as BaseButton from ./Button.vue
const Button ref(null) // 避免冲突
/script9.3 访问上下文问题
问题无法直接访问 this
script setup
// 错误this未定义
const router this.$router
/script解决方案
script setup
import { useRouter } from vue-routerconst router useRouter() // 使用Composition API
/script
