为何Vue3+TypeScript项目声明方法仍需function关键字？

核心差异：语法上下文不同 #

Angular组件基于类（Class）语法，而Vue3组合式API（尤其是<script setup>）运行在函数作用域内，这是两者方法声明规则不同的根本原因。

Angular的类语法规则 #

在Angular的组件类中，类的方法定义属于ECMAScript类标准的一部分，按照规范可以省略function关键字，直接写方法名+参数+函数体：

// Angular 组件类中合法的写法
@Component({
  selector: 'app-user',
  template: '<div>{{name}}</div>'
})
export class UserComponent {
  name = 'John';
  
  // 无需function关键字，类方法的标准写法
  updateName(fName: string, lName: string) {
    this.name = `${fName} ${lName}`;
  }
}

Vue3组合式API的函数作用域规则 #

Vue3的组合式API（无论是setup()函数还是<script setup>）本质是在一个函数内部编写逻辑，这里的方法属于函数内部的变量/函数声明，必须遵循JavaScript/TypeScript的函数作用域语法规则：

• 必须用function关键字声明具名函数
• 或者用箭头函数赋值给变量

// Vue3 <script setup> 中合法的写法
<script setup lang="ts">
import { ref } from 'vue';

const name = ref('John');

// 写法1：function关键字声明
function updateName(fName: string, lName: string) {
  name.value = `${fName} ${lName}`;
}

// 写法2：箭头函数赋值
const updateAge = (newAge: number) => {
  // ...逻辑
};
</script>

如果省略function，像updateName(fName: string, lName: string) {}这种写法，在函数作用域里会被解析成非法语法——既不是类方法，也不是合法的函数声明/变量赋值，因此编译器会报错。

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