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에서는 내부 함수가 변경됩니다.를 사용할 수 있습니다.window
variable: 글로벌 변수를 정의합니다.
(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
'programing' 카테고리의 다른 글
VueJ: 라우터 뷰를 통해 루트 요소에서 자 컴포넌트로 데이터 전달 (0) | 2022.08.27 |
---|---|
구문 오류:Vue js에 예기치 않은 토큰 }이(가) 있음 (0) | 2022.08.27 |
Vue: setInterval 변수 값으로 클래스 변경 (0) | 2022.08.27 |
다수의 Vue 프로젝트, 1개의 node_modules (0) | 2022.08.27 |
ES6 함수의 구문 (0) | 2022.08.27 |