Question

我正在使用VueJS并以严格模式（函数形式）编写JavaScript。问题是我无法再访问Chrome devtools中的Vue实例。如果我将代码修改为不在严格模式下运行，我可以轻松访问我的Vue对象。

有谁知道为什么会这样？

这是我的代码：

(function () {

    'use strict';

    var app = new Vue({
        el: '#app',
        data: {
            selectedProducts: [],
            ...snip...
    });

}());

那么，在我看来，我选择了一个单选按钮，然后在Chrome devTools控制台中输入以下内容：

app.selectedProducts

我在控制台中获得undefined。如果我还输入app.selectedProducts.length，则会收到以下错误：Uncaught TypeError: Cannot read property "length" of undefined at <anonymous>:1:21

但是，简单地从JS中删除use strict mode语法会使一切正常，我可以在控制台中访问对象。

是否使用严格的＆＃39;模式对我的对象做了什么特别的事情，我无法在控制台中访问它们？

Answer 1

通过使用您正在使用的语法（通常在使用示例函数时），您正在更改声明app变量并可以访问的范围。

内部范围可以（通常）从外部范围访问变量，但不能反过来。

// window scope that can't access variables from nested scope
(function () {
    // nested scope that can access variables from outer scope
    'use strict';

    var app = new Vue({
        el: '#app',
        data: {
            selectedProducts: [],
            ...snip...
    });

}());

最外面的范围是window范围，此处声明的变量将附加到window对象，这也是开发工具使用的对象（如果您在那里使用app ，你真的在使用window.app）。

要在dev工具中使用现在在strict范围内声明的变量，请在window范围内声明它，然后使用strict范围内的Vue实例初始化它：

var app;

(function () {
    'use strict';

    app = new Vue({
        el: '#app',
        data: {
            selectedProducts: [],
            ...snip...
    });

}());

Answer 2

如果在自调用函数中声明app变量，则全局范围将无法访问该变量。只是要记住，在javascript范围内更改功能。您可以使用window变量来定义全局变量

(function (window) {

   'use strict';

   window.app = new Vue({
       el: '#app',
       data: {
           selectedProducts: [],
           ...snip...
   });

}(window));

VueJS2：声明严格模式阻止我访问控制台中的对象

2 个答案: