vue3中 function getText(){} 、 const getText=()=＞{} ；区别在哪里，优缺点

在 Vue 3 中，这两种写法在绝大多数场景下没有本质区别，但在 JavaScript 引擎层面和特定边界情况下存在差异。以下是详细对比：

核心区别

特性	function getText(){}	const getText = () => {}
this 绑定	动态 this，可被 call/apply 改变	词法作用域 this，继承外层
arguments 对象	有内置 arguments	没有，需用 ...args
构造函数	可以作为构造函数（有 prototype）	不能作为构造函数
变量提升	函数声明整体提升	无提升，存在暂时性死区
匿名/命名	有函数名，堆栈追踪清晰	匿名表达式，调试时显示为 getText（变量名）
语法简洁性	适合多行、复杂逻辑	适合单行表达式、隐式返回

在 Vue 3 中的具体影响

1. Options API（methods）

export default {
  methods: {
    // ✅ 推荐：函数声明，this 自动指向组件实例
    getText() {
      return this.msg  // this 是 Vue 组件
    },
    
    // ⚠️ 箭头函数：this 指向外层（通常是 undefined 或 window）
    getText: () => {
      return this.msg  // ❌ 报错或拿不到数据
    }
  }
}

结论 ：在 methods 中必须用函数声明，箭头函数会丢失组件实例上下文。

2. Composition API（<script setup>）

<script setup>
import { ref } from 'vue'

const msg = ref('hello')

// 两者完全等价，因为都不依赖 this
function getText() {
  return msg.value
}

const getText2 = () => {
  return msg.value
}

// 甚至可以简写（隐式返回）
const getText3 = () => msg.value
</script>

结论 ：在 Composition API 中，两者功能等价，选择取决于代码风格。

3. 回调与生命周期

// 箭头函数更简洁，且能保留外层 this
const items = ref([1, 2, 3])
const doubled = computed(() => items.value.map(item => item * 2))

// 函数声明在 watch 中同样可用
watch(source, function(newVal) {
  // 这里用函数声明也没问题，因为 watch 回调的 this 不指向组件
})

优缺点总结

function 声明

优点：

• 有函数名，Error stack 更友好

• 支持递归（内部可直接调用自己）

• 支持 arguments（某些旧库需要）

• 有 prototype，可被 new（虽然 Vue 中极少用）

缺点：

• 语法相对冗长

• 存在变量提升，可能造成逻辑混乱（在模块作用域中影响小）

箭头函数

优点：

• 语法简洁，适合单行表达式

• 无自己的 this，不会意外绑定错误上下文

• 天然适合函数式编程（map/filter/reduce 等链式操作）

• 无变量提升，更符合块级作用域直觉

缺点：

• 不能作为构造函数

• 没有 arguments（需用剩余参数）

• 不适合需要动态 this 的场景（如 DOM 事件处理器中的某些传统模式）

Vue 3 实践建议

场景	推荐写法	原因
methods（Options API）	function	必须保持 Vue 的 this 绑定
<script setup> 中的工具函数	const =>	简洁，无 this 问题
计算属性/侦听器回调	const =>	表达式简洁
需要递归的复杂函数	function	内部自引用方便
事件处理函数（模板中）	两者皆可	Vue 自动处理上下文

一句话总结 ：在 Vue 3 Composition API 中，选哪种主要看团队代码规范；在 Options API 的 methods 中，只能用函数声明。