단순한 VueJ 문제(마운트된 $data 설정)

단순한 VueJ 문제(마운트된 $data 설정)

편집

컴포넌트제공된 vue는 더 큰 웹 앱의 일부였기 때문에 이 질문에 대한 관련 코드를 삭제했습니다.내가 알아차리지 못한 것은 코드를 제거하는 과정에서 생긴 아주 작은 변화였다. 그것은 매우 큰 영향을 미쳤다.

다음과 같은 차이가 있습니다.

mounted() {
    // ....
}

또, 다음과 같이 합니다.

mounted: () => {
    // ....
}

오늘 아침 주의 깊게 조사한 결과, 코드에서 이 오류가 발견되어 문제가 발생한 실제 코드를 반영하도록 질문을 업데이트했습니다.

질문.

그냥 피곤할 수도 있지만, 잠들기 전에 누군가 제 문제를 찾아줄 수 있는지 도움을 요청하고 싶었어요.동작하지 않는 매우 간단한 Vue 컴포넌트가 있습니다.

요소.vue:

<template>
    <div>
        <p v-for="item in items">{{ item.text }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: []
            };
        },
        mounted: () => {
            var _this = this;
            $.ajax("/items.json").done(result => {
                _this.items = result;
            });
        }
    };
</script>

items.json

[
    {"text": "ABC"},
    {"text": "XYZ"}
]

그 단락들은 결코 렌더링되지 않는다.검사 결과 다음과 같습니다._this.items배열일 ) 및 AJAX 핸들러에 하지 않습니다._this.$data 존재하지 않는다

은 ~의 입니까?this마운트된 방법이 Vue의 다른 방법과 다른가요?아니면 제가 단순한 실수를 했나요?

□□□□□□□의 경우mounted 기능하면 값이 합니다.this를를하다왜런그 일일?

더 연구한 결과, 일반 기능과 화살표 기능의 미묘한 차이를 알게 되었습니다.나는 이전에 후자가 단지 일손일 뿐이라고 생각했지만, 그것만의 맥락도 가지고 있지 않다.

법mounted: () => {}기능을 사용하기 에, 「」는 「」입니다.

...신의것것것것없this,arguments,super , 「」new.target

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

다음은 Chrome 콘솔에서 테스트할 수 있는 차이점을 보여 주는 간단한 예입니다.

let testFunc = function() { console.log(this); }
testFunc(); // Window {...}
testFunc.bind("test")(); // String {"test"}
testFunc = () => { console.log(this); }
testFunc(); // Window {...}
testFunc.bind("test")(); // Window {...}

함수를 을 에 수 .this, 를 Vue 인스턴스에 수 this.

법mounted() { }ES6를 사용하는 것은 오브젝트뿐이며 화살표 기능은 사용하지 않습니다(따라서 자체 컨텍스트가 있어 바인드 할 수 있습니다).this□□□□□□□□★

설치 후크는 좋든 나쁘든 가장 많이 사용되는 후크입니다.첫 번째 렌더링 직전과 직후에 컴포넌트에 액세스 할 수 있습니다.그러나 서버 측 렌더링 중에는 실행되지 않습니다.

사용 조건: 초기 렌더링 직전 또는 직후에 구성요소의 DOM에 액세스하거나 수정해야 합니다.

다음 경우 사용하지 마십시오.초기화 시 구성 요소에 대한 데이터를 가져와야 합니다.이 경우 created()(또는 keep-alive 컴포넌트의 경우 created + activated)를 사용합니다.특히 서버 측 렌더링 중에 해당 데이터가 필요한 경우에는 더욱 그렇습니다.

따라서 mounted()를 created()로 변경하여 동작하는지 확인합니다.또한 $.ajax() 대신 axios를 검토하여 요청을 보내주시기 바랍니다.올바른 경로에서 json 파일을 요청하고 있는지 확인합니다.

언급URL : https://stackoverflow.com/questions/48533472/simple-vuejs-issue-setting-data-in-mounted