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 响应式变量作用域向下访问详解



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

在 Vue 3 的

你可能感兴趣的:(vue3,javascript,前端,vue.js,前端框架)