【Vue】【杂碎】()=＞和()=＞{}的区别

在 JavaScript 中，箭头函数 => 有两种写法：一种是带 {} 大括号的写法，另一种是不带大括号的写法。

如果箭头函数体内只有一行代码，那么可以省略大括号。这时候箭头函数会自动返回这一行的执行结果。示例代码如下：

const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出 3

上面的代码中，箭头函数 add 的函数体只有一行代码，它返回了 a + b 的计算结果。因此我们可以省略大括号，并且可以直接使用这个箭头函数来计算加法。

但是，如果箭头函数体内有多行代码，那么就必须使用大括号括起来。这时候箭头函数不会自动返回结果，而是需要手动使用 return 语句返回结果。示例代码如下：

const multiply = (a, b) => {
  const result = a * b;
  return result;
};
console.log(multiply(2, 3)); // 输出 6

上面的代码中，箭头函数 multiply 的函数体包含了多行代码，所以我们必须使用大括号并手动返回结果。

需要注意的是，使用大括号的函数体和不使用大括号的函数体之间还有一个重要的区别。具体来说，使用大括号的函数体中的 this 关键字指向的是这个箭头函数本身，而不是定义它的对象。而不使用大括号的函数体中，this 关键字则会继承外层作用域的 this 值。