关于vue中全局变量的疑问

Question

我在vue-cli项目中的main.js中var了一个变量a`
打印结果是找不到window下的a。然后我直接打印a

这样就能拿到a
在js中var的变量不都默认挂到window下么？这个a挂到谁的下面了?我还可以在vue中打印出最开始的那个window对象么?好蒙，求各位大大解惑。

Answer 1

经过Webpack打包会将main.js当做一个模块，Webpack输出的js通过立即执行函数的技巧，有效避免模块内变量污染全局window空间。你这段代码最后会变成这样的：

(function () {
  var a = "1111"
  console.log(a)
})()

Answer 2

打包之后你这个main.js中的代码其实是包含在一个自执行函数里面的，这个时候a就是个局部变量，如果你想挂在到window下，需要手动赋值：window.a = a;

Answer 3

使用域的问题。如果你想全局定义变量。则在main.js文件里定义。

// main.js

// 全局变量
Vue.prototype.aa = () => {
    return '111'
}


// 页面调用aa变量
// xxx.vue
// this.aa即可访问

created() {
    console.log(this.aa, 'aa全局变量')
}