前言：
在vue3中使用<script setup>，在定义变量的时候，有时候会用到比较多的ref，如：
const a = ref(false) const b = ref(true) const c = ref(null)
如果用传统的写法 setup() ，传统写法中所有的变量都是用 const state = reactive({//...}) 生成的，最后通过 return {...toRefs(state)} 返回，如：
export default {name: 'LeftSideBar',setup() {const state = reactive({isCollapsed: false,showHistory: true,activeMenu: null,marketPositionStyle: {},knowledgePositionStyle: {},workenchPositionStyle: {},menuItems: [{ name: 'AI超市', iconName: "icon-AIShop" },{ name: '知识库', iconName: "icon-knowledgeBase" },]})}// 方法定义const fun1 = () => {// }// 返回所有需要暴露的内容return {//定义的变量 ...toRefs(state),fun1,// 其他需要暴露的方法... } }
如何在使用`<script setup>`时更高效地管理多个变量呢？
一、两种写法的本质区别
核心原则：无论是否使用 <script setup>，Vue3 的响应式原理是一致的，只是变量组织方式不同。
| 特性 | 传统 setup() 写法 | <script setup> 写法 |
|---|---|---|
| 暴露方式 | 手动 return | 自动暴露顶层变量 |
| 代码组织 | 需要包裹在 setup() 函数内 |
直接写在顶层作用域 |
| 变量定义灵活性 | 可以用 reactive 批量管理 |
推荐多用 ref，但也能用 reactive 优化 |
二、<script setup> 中更简洁的写法
方法 1：用 reactive + toRefs 批量管理变量
<script setup> import { reactive, toRefs } from 'vue'// 将多个相关变量分组管理 const uiState = reactive({isCollapsed: false,showHistory: true,activeMenu: null,selectedHistory: null })const guideState = reactive({isShowGuide: true,showMarketGuide: false,showKnowledgeGuide: false,showWorkenchGuide: true })// 转换为 ref 集合（保持响应式） const { isCollapsed, showHistory, activeMenu, selectedHistory } = toRefs(uiState) const { isShowGuide, showMarketGuide, showKnowledgeGuide, showWorkenchGuide } = toRefs(guideState) </script>
方法 2：使用对象解构（推荐）
<script setup> import { reactive } from 'vue'// 使用单个 reactive 对象管理所有状态 const state = reactive({isCollapsed: false,showHistory: true,activeMenu: null,selectedHistory: null,isShowGuide: true,showMarketGuide: false,showKnowledgeGuide: false,showWorkenchGuide: true })// 在模板中直接通过 state.xxx 访问 </script><template><div :class="{ collapsed: state.isCollapsed }">{{ state.showHistory }}</div> </template>
三、两种写法的对比
传统 setup() 写法
export default {setup() {const state = reactive({isCollapsed: false,showHistory: true})return {...toRefs(state) // 必须手动返回 }} }
<script setup> 优化写法
<script setup> import { reactive } from 'vue'// 定义 const state = reactive({isCollapsed: false,showHistory: true })// 自动暴露 state 对象 </script><template><!-- 访问方式 --><div>{{ state.isCollapsed }}</div> </template>
四、重要注意事项
-
响应式保持规则：
-
直接解构
reactive对象会丢失响应式：// ❌ 错误！解构会丢失响应式 const { isCollapsed } = reactive({ isCollapsed: false })
-
必须使用
toRefs：// ✅ 正确 const state = reactive({ isCollapsed: false }) const { isCollapsed } = toRefs(state)
-
-
模板访问差异：
-
性能考量：
-
单个
reactive对象比多个ref内存占用更小 -
频繁访问嵌套属性时，
state.xxx比xxx.value更易读
-
五、最佳实践建议
-
按功能模块分组：
// 用户界面状态 const uiState = reactive({isCollapsed: false,showHistory: true })// 业务数据状态 const dataState = reactive({items: [],loading: false })
-
组合式函数封装：
// useSidebar.js export default () => {const state = reactive({isCollapsed: false,showHistory: true})const toggle = () => {state.isCollapsed = !state.isCollapsed}return { ...toRefs(state), toggle } }
-
模板中的访问优化：
<script setup> const state = reactive({isCollapsed: false,showHistory: true }) </script><template><!-- 直接访问 --><button @click="state.isCollapsed = !state.isCollapsed">{{ state.isCollapsed ? '展开' : '折叠' }}</button><!-- 或使用解构 --><button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '折叠' }}</button> </template>
六、完整示例对比
原始多个 ref 写法
<script setup> const isCollapsed = ref(false) const showHistory = ref(true) const activeMenu = ref(null) // ...其他 10+ 个 ref </script>
优化后的 reactive 写法
<script setup> const uiState = reactive({isCollapsed: false,showHistory: true,activeMenu: null,selectedHistory: null,isShowGuide: true,showMarketGuide: false,showKnowledgeGuide: false,showWorkenchGuide: true })const { isCollapsed, showHistory } = toRefs(uiState) </script><template><div :class="{ collapsed: uiState.isCollapsed }">{{ uiState.showHistory }}</div> </template>
总结
-
<script setup>中完全可以使用reactive来批量管理变量 -
toRefs是关键桥梁：将 reactive 对象转换为多个 ref -
按需选择模式：
-
简单组件：直接用多个 ref
-
复杂组件：用 reactive 分组管理
-
-
保持响应式：始终通过
.value或 reactive 对象属性访问值
通过合理使用 reactive + toRefs 的组合，完全可以实现与传统 setup() 函数相似的简洁代码结构，同时享受 <script setup> 的自动暴露优势。
--------------------------- 分割线（可忽略）------------------------------------
文章由deepseek生成，记录个人问题和seepseek思考过程。
个人问题：
我看用vue3 <script setup> 的话，在定义变量的时候，定义了一大堆，个人觉得有点麻烦，如下： const isCollapsed = ref(false) const showHistory = ref(true) const activeMenu = ref(null) const selectedHistory = ref(null) const isShowGuide = ref(true) const showMarketGuide = ref(false) const showKnowledgeGuide = ref(false) const showWorkenchGuide = ref(true) 在之前的没有用 <script setup> 语法糖的时候，用的是传统的写法 setup() ，传统写法中所有的变量都是用const state = reactive({//...}) 生成的，最后通过return {...toRefs(state)}返回要暴露的变量了。 我的疑问是：是不是使用了<script setup>语法糖的时候，定义基本类型的数据，就必须用ref定义？有多少个就定义多少个，是不是没有更简洁的写法？而用传统的写法 setup() 的时候，可以用reactive批量定义变量，最后只用通过return中的toRefs返回就行？
思考过程：
好的，用户现在对Vue3的两种写法（`<script setup>`和传统`setup()`函数）在定义变量时的差异感到困惑。他们注意到在使用`<script setup>`时，每个基本类型的变量都需要单独用`ref`定义，显得比较繁琐，而传统写法可以通过`reactive`批量定义并通过`toRefs`一次性暴露，想知道是否有更简洁的方式。首先，我需要确认用户的核心疑问：在使用`<script setup>`时，是否必须对每个基本类型变量使用`ref`，而无法像传统`setup()`那样用`reactive`批量管理。用户希望了解是否有更简洁的方法，同时想明确两种写法在变量管理上的优劣。接下来，我需要回忆Vue3的响应式系统。`reactive`用于对象，而`ref`适用于所有类型，包括基本类型。在传统`setup()`中，使用`reactive`包裹对象，然后通过`toRefs`解构，可以方便地批量暴露变量。但在`<script setup>`中，由于自动暴露顶层变量的特性，直接使用`reactive`会导致模板中需要访问对象的属性，不如`ref`直接。用户提到的繁琐在于每个变量都要单独用`ref`定义，这确实会增加代码量。但有没有办法在`<script setup>`中用`reactive`批量管理，同时保持模板的简洁呢？答案是肯定的，但需要注意响应式丢失的问题。例如，可以将相关变量分组到不同的`reactive`对象中，然后通过解构`toRefs`来暴露，这样既能减少`ref`的数量，又能保持响应性。不过，用户可能担心解构后的变量是否仍然保持响应式。这里需要解释`toRefs`的作用，它会将`reactive`对象的每个属性转换为`ref`，确保解构后的变量仍然是响应式的。这样在模板中可以直接使用变量名，而不需要通过对象属性访问。此外，用户可能没有意识到，在`<script setup>`中，可以将多个相关的状态组合到一个`reactive`对象中，然后通过解构`toRefs`来简化代码。例如，将所有的布尔状态放在一个`state`对象中，这样只需一个`reactive`和`toRefs`即可管理多个变量。还需要比较两种写法的优缺点。传统`setup()`函数虽然可以通过`toRefs`批量暴露，但需要手动返回所有变量，而`<script setup>`自动暴露顶层变量，减少了样板代码。然而，当变量较多时，单独使用`ref`可能显得冗长，此时结合`reactive`和`toRefs`可以优化代码结构。最后，需要给出具体的示例，展示如何在`<script setup>`中使用`reactive`和`toRefs`来简化变量定义，并说明注意事项，比如避免直接解构`reactive`对象导致响应式丢失，必须使用`toRefs`进行转换。总结来说，用户的问题集中在如何在使用`<script setup>`时更高效地管理多个变量，而解决方案在于合理使用`reactive`和`toRefs`的组合，既能减少代码量，又能保持响应式特性。
