Vue 2.7是否忽略变量提升？同代码Node报错Vue正常原因解析

核心原因：执行时机的差异 #

你在Node环境和Vue组件中的代码执行时机完全不同，这才是结果差异的关键，和Vue是否忽略变量提升无关：

1. Node环境的执行流程 #

你的Node代码中：

const test2 = () => {
  test();
};
test2(); // 此处立即调用test2
const test = () => console.log("test");

• 执行到test2()时，test虽被提升至当前作用域顶部，但处于暂时性死区（TDZ），无法被访问，因此抛出ReferenceError。这是ES6const/let的标准行为，和箭头函数本身无关（只有普通函数声明的提升才能让函数提前被调用）。

2. Vue 2.7中<script setup>的执行流程 #

你的Vue组件代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="test2">button</button>
  </div>
</template>

<script setup>
const test2 = () => {
  test();
};
const test = () => console.log("test");
</script>

• <script setup>中的代码会被编译为组件的setup函数内容，在组件初始化阶段执行：
  1. 先定义test2函数（此时test确实未初始化，但test2并未被立即调用）；
  2. 接着完成test函数的定义；
  3. 组件挂载完成后，用户点击按钮才会触发test2的调用——这时test早已完成初始化，处于可访问状态，自然不会报错。

额外说明：<script setup>的编译逻辑 #

Vue 2.7的<script setup>并没有修改JS的变量提升规则，它只是把代码包裹在了组件的setup生命周期中。所有const/let声明的变量都会在setup执行时按顺序初始化，只有当这些变量全部初始化完成后，组件的交互事件（如按钮点击）才会触发对应的函数调用。

内容的提问来源于stack exchange，提问作者rabong