在Vue3中推荐使用的函数定义方法

const funcName = (argName) => {}; 和 function funcName(argName) {} 这两种方式,哪种定义函数比较好一点呢?

两种方式各有适用场景,简单总结:

箭头函数 const fn = () => {}

没有自己的 this,继承外层作用域的 this

不会被提升(hoisting),必须先定义后使用

语法简洁,适合回调和短函数

不能用作构造函数(new)

函数声明 function fn() {}

有自己的 this 绑定

会被提升,可以在定义之前调用

可以用作构造函数

在你当前项目(Vue 3 <script setup>)中,用箭头函数 const fn = () => {} 更好,原因:

<script setup> 本身就是一个模块作用域,不需要 this

Vue 3 Composition API 风格统一用 const + 箭头函数是社区惯例

const 防止函数被意外重新赋值

你现有代码已经全部是这种风格,保持一致即可

唯一需要注意的:箭头函数不会提升,所以如果两个函数互相调用,需要注意定义顺序。如果遇到这种情况,可以用 function 声明来解决。

相关推荐
头茬韭菜7 分钟前
4.9 SSRF 防护 — Web 工具的出站安全与私有 IP 拦截
前端·tcp/ip·安全
Cobyte16 分钟前
模板 DSL 解析器中的状态机设计
前端·javascript·vue.js
颜酱19 分钟前
# 02 | 搭骨架:用 LangGraph 编排 12 步工作流(思路)
前端·人工智能·后端
颜酱20 分钟前
02 | 搭骨架:用 LangGraph 编排 12 步工作流
前端·人工智能·后端
刘卓航众创芯云服务部1 小时前
Kimi K3复杂任务实测:我把团队最头疼的三个场景全跑了一遍
前端
软件开发技术深度爱好者2 小时前
小学英语单词魔法学园HTML5实现
javascript·html5·英语学习
勉灬之2 小时前
Next.js + Prisma 跨平台部署踩坑记
开发语言·javascript·ecmascript
cll_8692418912 小时前
一个好看的Wordpress博客文字css样式
前端·css·ui
武子康2 小时前
Shippy:确定性工具、会话级 Sandbox 与 Live-Data Eval(4 类收敛 + 7 步实现方案 + 6 类评测指标)
前端·人工智能·后端
糖果店的幽灵2 小时前
langgraph分支之 - 动态分支(Dynamic Branch)
java·前端·javascript·人工智能·langgraph