如何将Vue选项式API的滚动到元素代码转换为<script setup>语法？

没问题，这就把你用选项式API写的平滑滚动功能转换成<script setup>语法——核心逻辑完全一致，只是写法更贴合Vue 3的Composition API风格，更简洁直观：

完整实现代码 #

<template>
  <!-- 触发滚动的按钮 -->
  <button @click="scrollToElement">滚动到目标区域</button>
  
  <!-- 需要滚动到的目标元素，绑定ref引用 -->
  <div ref="sectionRef" style="margin-top: 1000px; padding: 20px; background: #eee;">
    我是要滚动到的目标区域
  </div>
</template>

<script setup>
// 从Vue导入ref函数，用于创建元素引用
import { ref } from 'vue'

// 创建一个ref变量，对应模板里的元素引用
const sectionRef = ref(null)

// 定义滚动函数，逻辑和原代码一致
const scrollToElement = () => {
  const targetEl = sectionRef.value
  if (targetEl) {
    targetEl.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

关键变化说明 #

• 不需要再写export default和methods选项了，<script setup>会自动把顶层的变量、函数暴露给模板使用
• 原代码里的this.$refs.section，在Composition API中需要先通过ref()创建一个引用变量（比如sectionRef），然后在模板里把这个变量绑定到目标元素的ref属性上
• 在脚本中访问ref绑定的元素时，需要通过.value属性（模板中会自动解包，不需要写.value）

这样改完之后，功能和你原来的选项式API代码完全一样，而且更符合Vue 3的推荐写法~

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