JavaScript中import导入的外部变量看不到值

之前在调试Vue页面的时候就一直发现一个问题，就是明明我要看一个变量，打断点后鼠标移到变量上观察，却提示我

value is not defined

可是运行却又不报错。唯一可以支持观察的方法就是用console打印出来。之前一直没去仔细想过这个问题，直到我下定决心要搞清楚它。

原来，这一切并不是Vue才有的，只要是支持ES6语法的浏览器，使用import导入外部变量，在引用外部变量的时候，手动断点观察就会看到以上提示。那为什么import导入的变量不能像其它变量一样直接明了地显示呢？我在网上看到一个不错的讲解，拿来分享。

; (function() {
    var b = 2; (function() {
        debugger
    })()
})()

上面这段代码运行后，我们把鼠标移到变量b上面会发现，提示我们

b is not defined

但是如果我们稍作修改

; (function() {
    var b = 2; (function() {
        debugger
        console.log(b);
    })()
})()

这一次，当执行到断点的时候，鼠标移到变量b就会提示b=2。为什么会加了一句，结果就完全不一样了？原因很简单，因为debugger下面一句代码，引用了b变量。

所以，我们可以得出一个结论。使用以上的写法，可以在只需要引用特定变量的时候，才会加载。import也是同样的原理。使用import导入的变量，只会在需要的时候才会被引用。换句话说，也就是使用import导入的变量，只有当需要时才分配内存空间，节省空间。所以，import变量无法用断点观察。