开发者问题收集

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

2017-08-21
5005
javascript vuejs2

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

有人知道为什么会发生这种情况吗？

Here's my code: 

(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' 模式是否会对我的对象产生任何特殊影响，导致我无法在控制台中访问它们？

2个回答

通过使用您正在使用的语法（通常在使用例如函数时），您正在更改您的 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 ）。

要在开发工具中使用现在在 strict 范围内声明的变量，请在 window 范围内声明它，然后在 strict 范围内使用您的 Vue 实例对其进行初始化： 

var app;

(function () {
    'use strict';

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

}());
Laura
2017-08-23

如果您在自调用函数内声明 app 变量，则该变量将无法被全局范围访问。请记住，在 javascript 中，范围在 function 内发生变化。 您可以使用 window 变量来定义全局变量 

(function (window) {

   'use strict';

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

}(window));
Olivier Boissé
2017-08-23