Vue3代码转<script setup>：setup函数中const解构该如何处理？

直接把原setup函数里的解构逻辑移到<script setup>的顶层即可，不需要手动return任何内容——<script setup>会自动将顶层声明的变量、方法暴露给模板使用。

转换后的完整代码：

<script setup>
import { useEasyLightbox } from '你的依赖包路径'

const {
  // methods
  show, onHide, changeIndex,
  // refs
  visibleRef, indexRef, imgsRef
} = useEasyLightbox({
  // src / src[]
  imgs: [
    'http://via.placeholder.com/250x150',
    'http://via.placeholder.com/300x150',
    'http://via.placeholder.com/350x150'
  ],
  // initial index
  initIndex: 0
})

// 这里不需要写return，visibleRef、show等变量/方法自动在模板中可用
</script>

关键说明： #

• <script setup>是Vue 3的语法糖，顶层作用域中声明的所有变量、函数、import导入的内容，都会自动绑定到当前组件的模板上下文，无需像Options API的setup函数那样手动return。
• 如果原代码中changeIndex方法你不需要在模板或组件逻辑中使用，可以从解构列表里删掉，不影响其他内容的使用。

内容的提问来源于stack exchange，提问作者lunacafu