vue3中使用const和function声明函数的差异

在 JavaScript 和 TypeScript 中，const 和 function 声明在作用域内是可见的，但是它们在代码执行时的处理方式有所不同，尤其是在 Vue 3 的 <script setup> 语法中。

const 声明

使用 const 声明的变量，其初始化表达式会在代码执行时立即求值。这意味着 const 声明的变量在使用之前必须已经初始化完成。如果你尝试在一个 const 声明之前使用该变量，将会抛出 ReferenceError，因为此时变量还没有被初始化。

function 声明

对于 function 声明，JavaScript 引擎会在代码执行前对其进行“提升”（hoisting）。这意味着即使 function 声明在物理位置上位于代码的后面，它也可以在声明之前被调用。这是 JavaScript 函数提升（function hoisting）的特性。

为什么使用 function 可以而 const 不可以

在你的例子中，使用 function 声明 useFunction 可以工作，是因为 Vue 3 <script setup> 利用了 JavaScript 的函数提升特性。Vue 的编译器会处理这些函数声明，确保它们在被调用之前已经可用。

然而，使用 const 声明的变量或对象（如 useFunction 函数的返回值）不能在初始化之前使用，因为它们没有被提升，必须在声明时立即初始化。

总结

• const 声明需要立即初始化，不能在声明之前使用。
• function 声明可以被提升，可以在声明之前调用。
• 在 Vue 3 的 <script setup> 中，顶级的函数和变量绑定都会被提升，允许在定义之前使用。

因此，如果你需要在 <script setup> 中定义一个可复用的函数或变量，并希望在定义之前使用它，使用 function 声明是合适的。如果你只是声明一个立即可用的变量或对象，可以使用 const 或 let。