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

Question

我正在使用 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 mode 语法就可以使一切正常工作，我可以在控制台中访问对象。

“使用严格”模式是否对我无法在控制台中访问的对象执行任何特殊操作？

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)。

要使用现在在您的 strict 中声明的变量开发工具中的范围，在 window 中声明它作用域，然后在 strict 中用你的 Vue 实例初始化它范围:

var app;

(function () {
    'use strict';

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

}());