vue3 响应式变量作用域向下访问的原因及分析(面试必备)

1. 什么是词法作用域?

首先先来解释一下作用域就是作用的范围，比如定义一个普通函数，该函数就会有自己的作用域，并且在函数里面定义的变量，函数外面是使用不了函数里面定义的变量的，作用域决定了代码区块中的变量和其他资源的可见性。

而作用域也分为静态作用域和动态作用域，词法作用域就是静态作用域，静态作用域在函数定义的时候就决定了，而动态作用域在函数调用时才决定。静态作用域在编译时期（词法解析阶段）就确定好了，所以也叫词法作用域。

Javascript 采用的是词法作用域,即静态作用域。

2.其他常用作用域重要理解

JavaScript 中的作用域分为全局作用域、函数作用域和块级作用域。以下是它们的示例：

1. 全局作用域：

var globalVar = "I am global!"; // 全局作用域内的变量

function foo() {
  console.log(globalVar); // 可以在函数内部访问全局作用域内的变量
}

foo(); // 输出 "I am global!"
console.log(globalVar); // 输出 "I am global!"

在上面的示例中，globalVar 是在全局作用域内定义的变量，可以在函数 foo 内部和函数外部访问。

2.函数作用域：

function foo() {
  var x = 10; // 函数作用域内的变量
  console.log(x); // 输出 10
}

foo();
console.log(x); // 报错，x is not defined

在上面的示例中，x 是在函数 foo 内部定义的变量，只在函数内部有效，函数外部无法访问。

3.块级作用域：

if (true) {
  var globalVar = "I am global!"; // 在块级作用域内使用 var 声明的变量
  let localVar = "I am local!"; // 在块级作用域内使用 let 声明的变量
  const constVar = "I am const!"; // 在块级作用域内使用 const 声明的常量
}

console.log(globalVar); // 输出 "I am global!"，因为使用 var 声明的变量具有函数作用域，不受块级作用域限制
console.log(localVar); // 报错，localVar is not defined，因为使用 let 声明的变量具有块级作用域，只在块级作用域内有效
console.log(constVar); // 报错，constVar is not defined，因为使用 const 声明的常量具有块级作用域，只在块级作用域内有效

3.Vue3 响应式变量作用域向下访问详解

<script setup>
const fun=()=>{
  console.log('data2',count); // 12
}
fun()
const count = 12 
</script>

-------------------------分割线下面是js正常作用域访问不到
 // 当前为js正常作用域
const fun=()=>{
 // "Uncaught ReferenceError: Cannot access 'count' before initialization"
  console.log('data2',count); 
}
fun()
const count = 12

在 Vue 3 的 <script setup> 中，将 let count = ref(0); 的定义放在最后面，即在后续的代码之后，是可以访问和修改该变量的。

原因：

1.在 Vue 中，变量在 Vue 组件中可以在不同的作用域中进行访问，这是因为 Vue 使用了   JavaScript 中的闭包特性。

2. 在这个示例中，虽然变量 count 的定义放在了最后面，但在后续的代码中仍然可以访问和修改该变量的值，因为 Vue 3 会处理 ref 函数创建的变量，使其在整个 <script setup> 内都可用，不需要严格遵循 JavaScript 的词法作用域规则。

这是 Vue 3 的特性之一，使得在 <script setup> 中使用响应式变量更加方便和灵活。但需要注意，对于普通的 let 或 const 关键字定义的变量，仍然需要遵循 JavaScript 的词法作用域规则，在其定义之后的位置才能访问和修改变量的值。