资讯动态

vue3箭头函数注意点

发布时间:2026/10/29 9:44:37 来源:尧图企业网站定制
一旦写了花括号里面就必须有 return否则返回值是 undefined 箭头函数 写法 是否自动返回()表达式 ✅ 自动返回表达式结果(){语句}❌ 不自动返回需要手写return()({...})✅ 返回对象用括号包住对象字面量避免和函数体花括号混淆 只有箭头函数不写函数大括号{}的简写形式后面的内容才会隐式 return // 简写无{}自动return()({count:0})// 简写无{}自动return括号只是分组()(12)// 简写无{}自动return不加括号也行()12 // ❌ 有{}函数体不会自动return必须写return(){return{count:0}}// A(){return{count:0}}// B()({count:0})// Cfunction(){return{count:0}}A 和 B只是箭头函数两种语法写法同一个函数 A、B 和 C逻辑结果一样执行后都返回{count:0}放到 Pinia state 里使用没有区别 功能上完全等价运行效果一模一样只是语法写法不同。(){...}{}代表函数体代码块代码块里想要返回值必须手动写return(){return{count:0}}()({...})箭头函数简写返回 箭头后面如果直接写{}JS 会认为是函数体不是对象 包一层()告诉 JS括号里面是要返回的对象字面量省略return()({count:0})function(){return...}普通函数固定规则函数体{}靠return返回对象 箭头函数想直接返回对象对象外面套小括号小括号里面就是返回的东西。()(12)等价于(){return12}//1. 数字表达式加括号()(12)// 等价(){return12}//2. 数字表达式不加括号更常见()12基础类型()100// 返回数字()hello// 返回字符串()true// 返回布尔()null()undefined 运算、三元表达式()10*5-2()105?大:小()(105?大:小)// 三元比较长时习惯包括号可读性更好 返回数组数组不需要外面包括号()[1,2,3]// 等价(){return[1,2,3]}返回对象重点必须()()({name:张三})// 等价(){return{name:张三}}调用函数 const fn()666()fn()// 等价(){returnfn()}链式调用()arr.filter(xx0).map(xx*2)

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑