Vue 3 Composition API（Script Setup）中如何正确定义组件方法？

在Vue 3的Script Setup语法里，你提到的两种方法定义方式都是正确的，只是适用场景和特性略有区别：

1. 常规函数语法 function increment() {} #

• 这种写法的函数具备提升特性，你可以在函数定义之前就调用它，在需要提前使用函数的场景下更方便。
• 如果需要递归调用函数本身，直接写函数名即可，无需额外处理。
• 注意：在Script Setup的闭包环境里，函数自身的this并不指向组件实例（严格模式下为undefined），所以不用依赖this来访问组件属性，直接用顶层定义的响应式变量就行。

示例代码：

<script setup>
// 可以先调用再定义函数
increment()

function increment() {
  console.log('调用了常规函数')
}
</script>

2. 箭头函数 const increment = () => {} #

• 箭头函数没有自己的this，它会继承外层作用域的this（在Script Setup里同样不指向组件实例），写法更简洁。
• 箭头函数不具备提升特性，必须先定义完成才能调用；如果需要递归，得先声明变量再赋值：

示例代码：

<script setup>
// 先声明变量
let increment
increment = () => {
  console.log('调用了箭头函数')
  // 递归调用
  increment()
}
</script>

总结 #

两种写法都能正常工作，选择哪种取决于你的需求：

• 若需要函数提升、递归更便捷，优先用常规函数。
• 若追求代码简洁，或者不需要处理独立的this，可以用箭头函数。

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