各位观众老爷们，大家好！我是今天的讲师，一个在代码堆里摸爬滚打多年的老码农。今天咱们就来聊聊 Vue 3 的 setup 语法糖，看看它到底是怎么让咱们写代码更爽的。
一、 前 setup 时代：那段古老的记忆
在 setup 语法糖出现之前，我们写 Vue 组件通常是这样的：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">{{ count }}</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
}
</script>这段代码虽然简单易懂，但随着组件越来越复杂，data、methods、computed、watch 等等，全都挤在一个 export default 里，代码一多，就跟一堆乱麻似的，让人头皮发麻。而且 this 的指向问题，也时不时出来捣乱，让人防不胜防。
二、 setup 语法糖：救星来了！
Vue 3 推出了 setup 函数，它是一个新的组件选项，在组件创建之前执行，作为组合式 API 的入口。而 setup 语法糖，就是对 setup 函数的进一步简化，它让我们可以更简洁地编写组件。
先来看一个简单的例子：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">{{ count }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue!')
const count = ref(0)
function increment() {
count.value++
}
</script>有没有觉得清爽多了？
- 告别
export default：setup语法糖会自动将script标签内的代码，作为组件的setup函数来处理，不需要再手动export default。 - 无需
return： 在setup语法糖中，所有顶级的变量、函数，都会自动暴露给模板使用，不需要像以前那样return出去了。 - 拥抱 Composition API：
setup语法糖是为 Composition API 量身定制的，可以更方便地使用ref、reactive、computed、watch等函数。
三、 setup 语法糖的优势：如丝般顺滑
setup 语法糖带来的优势可不止是代码更简洁，还有很多其他的优点：
-
更好的类型推断：
由于
setup语法糖是基于函数作用域的，所以 TypeScript 可以更好地进行类型推断，减少类型错误。<script setup lang="ts"> import { ref } from 'vue' const count = ref<number>(0) // 明确指定 count 的类型为 number function increment() { count.value++ // count.value = 'hello' // TypeScript 会报错，因为类型不匹配 } </script> -
更好的代码组织：
使用 Composition API，我们可以将相关的逻辑组织在一起，形成一个个独立的“组合函数”（Composable Functions），提高代码的可读性和可维护性。
例如，我们可以将获取用户信息的逻辑封装成一个
useUser函数：// useUser.js import { ref, onMounted } from 'vue' export function useUser(userId) { const user = ref(null) const loading = ref(false) const error = ref(null) async function fetchUser() { loading.value = true error.value = null try { const response = await fetch(`/api/users/${userId}`) user.value = await response.json() } catch (e) { error.value = e } finally { loading.value = false } } onMounted(fetchUser) return { user, loading, error, refetch: fetchUser // 提供一个重新获取数据的方法 } }然后在组件中使用：
<template> <div> <div v-if="loading">Loading...</div> <div v-if="error">Error: {{ error.message }}</div> <div v-if="user"> <h1>{{ user.name }}</h1> <p>Email: {{ user.email }}</p> <button @click="refetch">Refresh</button> </div> </div> </template> <script setup> import { useUser } from './useUser.js' const { user, loading, error, refetch } = useUser(123) </script>这样，组件的代码就变得非常简洁，只关注如何展示数据，而数据的获取逻辑则被封装到了
useUser函数中。 -
更好的代码复用：
Composable Functions 可以很容易地在不同的组件之间复用，减少代码冗余。
例如，如果另一个组件也需要获取用户信息，只需要简单地引入
useUser函数即可。 -
更小的打包体积：
由于 Composition API 更加灵活，我们可以只引入需要的函数，避免引入整个 Vue 对象，从而减小打包体积。
-
更好的性能：
Composition API 可以更好地进行 tree-shaking，移除未使用的代码，提高性能。
四、 setup 语法糖的注意事项：小心驶得万年船
虽然 setup 语法糖有很多优点，但也需要注意一些事项：
-
生命周期钩子：
在
setup语法糖中，我们需要使用onMounted、onUpdated、onUnmounted等函数来注册生命周期钩子，而不是像以前那样使用mounted、updated、beforeDestroy等选项。<script setup> import { onMounted, onUnmounted } from 'vue' onMounted(() => { console.log('组件挂载了！') }) onUnmounted(() => { console.log('组件卸载了！') }) </script>选项式 API 组合式 API (setup 语法糖) beforeCreatesetup()内部createdsetup()内部beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggered -
this的缺失：在
setup语法糖中，没有this上下文。我们需要使用ref和reactive来创建响应式数据，并直接在模板中使用它们。 -
异步组件：
使用
setup语法糖的组件，默认是异步组件。这意味着在首次渲染时，可能会出现一些延迟。可以使用<Suspense>组件来处理异步组件的加载状态。 -
与 Options API 混合使用：
虽然 Vue 3 允许将 Composition API 和 Options API 混合使用，但不建议这样做。因为这会增加代码的复杂性，降低可读性。最好选择一种风格，并坚持使用它。如果你正在维护一个老的项目，并且需要逐步迁移到 Vue 3，那么可以考虑混合使用。
五、 实际项目中的应用：磨刀不误砍柴工
setup 语法糖在实际项目中有很多应用场景：
-
表单处理：
可以使用 Composable Functions 来封装表单验证逻辑，提高代码复用性。
// useForm.js import { ref } from 'vue' export function useForm(initialValues, validate) { const values = ref(initialValues) const errors = ref({}) const isSubmitting = ref(false) async function handleSubmit(callback) { isSubmitting.value = true errors.value = validate(values.value) if (Object.keys(errors.value).length === 0) { try { await callback(values.value) } catch (e) { console.error(e) } } isSubmitting.value = false } function handleChange(key, value) { values.value[key] = value } return { values, errors, isSubmitting, handleSubmit, handleChange } }<template> <form @submit.prevent="handleSubmit(onSubmit)"> <div> <label for="name">Name:</label> <input type="text" id="name" v-model="values.name" @input="handleChange('name', $event.target.value)"> <div v-if="errors.name">{{ errors.name }}</div> </div> <div> <label for="email">Email:</label> <input type="email" id="email" v-model="values.email" @input="handleChange('email', $event.target.value)"> <div v-if="errors.email">{{ errors.email }}</div> </div> <button type="submit" :disabled="isSubmitting">Submit</button> </form> </template> <script setup> import { useForm } from './useForm.js' const initialValues = { name: '', email: '' } function validate(values) { const errors = {} if (!values.name) { errors.name = 'Name is required' } if (!values.email) { errors.email = 'Email is required' } else if (!/S+@S+.S+/.test(values.email)) { errors.email = 'Invalid email format' } return errors } const { values, errors, isSubmitting, handleSubmit, handleChange } = useForm(initialValues, validate) async function onSubmit(values) { console.log('Submitting...', values) // Send data to server await new Promise(resolve => setTimeout(resolve, 1000)) // Simulate API call console.log('Submitted!') } </script> -
数据请求：
可以使用 Composable Functions 来封装数据请求逻辑，处理加载状态和错误处理。
（参考上面
useUser.js的例子） -
状态管理：
可以结合 Pinia 或 Vuex 等状态管理库，更好地管理组件的状态。
-
动画效果：
可以使用 Composable Functions 来封装动画效果，提高代码复用性。
六、 总结：拥抱变化，才能拥抱未来
总而言之，Vue 3 的 setup 语法糖是一个非常强大的工具，它可以让我们的代码更简洁、更易于维护、更易于复用。虽然学习曲线可能会稍微陡峭一些，但一旦掌握了它，你就会发现它能极大地提高你的开发效率。
记住，技术是不断发展的，我们需要不断学习新的技术，才能跟上时代的步伐。拥抱变化，才能拥抱未来！
今天的讲座就到这里，谢谢大家！希望对大家有所帮助。