programing

VueJS2: 엄밀한 모드를 해제하면 콘솔 내의 오브젝트에 액세스할 수 없음

bestcode 2022. 8. 27. 09:37
반응형

VueJS2: 엄밀한 모드를 해제하면 콘솔 내의 오브젝트에 액세스할 수 없음

저는 VueJs를 사용하여 JavaScript를 strict 모드(함수 형식)로 쓰고 있습니다.문제는 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 구문을 삭제하는 것만으로 모든 것이 정상적으로 동작하며 콘솔의 오브젝트에 액세스할 수 있습니다.

use strict' 모드에서는 콘솔에서 액세스할 수 없는 객체에 특별한 기능이 있습니까?

사용하고 있는 구문(일반적으로 기능 등)을 사용하면, 그 범위를 변경할 수 있습니다.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오브젝트(dev tool이 사용하는 것)이기도 합니다(사용하는 경우).app저기, 너 정말 잘 쓰고 있구나window.app).

현재 선언된 변수를 사용하려면strict개발 도구의 범위, 선언window대신 스코프를 지정하고 Vue 인스턴스로 초기화합니다.strict범위:

var app;

(function () {
    'use strict';

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

}());

자체 호출 함수 내에서 앱 변수를 선언하면 글로벌 스코프에서 해당 변수에 액세스할 수 없습니다.참고로 javascript scope에서는 내부 함수가 변경됩니다.를 사용할 수 있습니다.windowvariable: 글로벌 변수를 정의합니다.

(function (window) {

   'use strict';

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

}(window));

언급URL : https://stackoverflow.com/questions/45796010/vuejs2-declariing-strict-mode-prevents-me-from-accessing-object-in-console

반응형