vue3页面空白-普通函数和箭头函数提升的不同

在 JavaScript 中，普通函数（即使用 function 关键字定义的函数）和箭头函数（使用 () 和 => 定义的函数）在作用域和提升（hoisting）行为上有不同的表现。

1. 普通函数（Function Declarations） 普通函数声明会被提升（hoisted），也就是说，它们可以在声明之前被调用。这是因为函数声明会被提升到当前作用域的顶部。例如：

console.log(foo()); // 输出 "Hello"function foo() {return "Hello";
}

在这个例子中，尽管 foo 函数是在调用之后才声明的，但它仍然可以正常工作，因为函数声明会被提升。

2. 箭头函数和其他函数表达式 箭头函数和其他函数表达式（如使用 var, let, const 定义的函数）不会被提升。这意味着它们必须在声明之后才能被调用。例如：

console.log(bar()); // 报错：TypeError: bar is not a functionconst bar = () => {return "World";
};

在这个例子中，如果尝试在 bar 函数声明之前调用它，会导致错误，因为 bar 在声明之前只是一个未定义的标识符。

---

错例

watchEffect(() => {if(calculateWinner(squareValues.value)){status.value = 'Winner: ' + calculateWinner(squareValues.value) + ' ! ';}else if(!squareValues.value.filter(item => item === '').length){status.value = 'Draw !';}else{status.value = 'Next player is ' + (xIsNext.value ? 'X' : 'O');}
});const calculateWinner = (squares) => {const lines = [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6]];for(let i = 0; i < lines.length; i++) {const [a, b, c] = lines[i];if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {return squares[a];}}return null;
}