잘못된 컨텍스트를 제공하는 Vue watch[뚱뚱한 화살표]

잘못된 컨텍스트를 제공하는 Vue watch[뚱뚱한 화살표]

이 질문에는 이미 다음과 같은 해답이 있다.

계산된 vue의 화살표 사용 기능이 작동하지 않음 (6개 답변)

닫힌2년 전.

나는 기능 호출을 취소하기 위해 lodash를 사용하고 있는데 왜 내 전화를 받지 않는지 궁금하다.this값이 내가 기대한 대로 범위를 상속하지 않는다.

이것들은 내 Vue 구성 요소와 관련된 부분이다.

import debounce from 'lodash/debounce';

watch: {
    query: debounce(() => {
        this.autocomplete();
    }, 200, {
        leading: false,
        trailing: true
    }),

위 건은 나의 탓으로 효력이 없다.this값이 Vue 구성 요소를 가리키지 않고 다음과 같은 개체를 표시함:

Object
    __esModule: true
    default: Object
    __proto: Object

내 화살표 구문이 의 컨텍스트를 상속하도록 되어 있지 않은가?this?

다음과 같은 것이 효과가 있는 것 같다.

query: debounce(function test() {
    this.autocomplete();
}, 200, {
    leading: false,
    trailing: true
})

이것에 대한 쉬운 답이 있을 수 있지만 나는 누군가가 나를 도와줄 수 있기를 바란다.

이것은 단지 의 오해를 설명하기 위한 추가 대답일 뿐이다.this화살촉의

화살표는 어떻게 작동하는가?

this어휘 기능에서는 항상 주변 범위를 가리킨다.다음 중 하나가 될 수 있다.

1. 가장 가까운 주변 함수
2. 가장 가까운 주변 모듈
3. 글로벌 범위

만약 우리가 당신의 코드를 본다면, 우리는 당신이 ES6 모듈을 사용하고 있다고 가정한다.import/export문장:

import debounce from 'lodash/debounce';

export default {
    watch: {
        query: debounce(() => {
            this.autocomplete();
        }, 200, {
            leading: false,
            trailing: true
        }),
    }
};

목록을 살펴봅시다:

1. 가장 가까운 주변기능

화살표 기능에는 주변 기능이 없다.예를 들면 다음과 같다.

var obj = {
    a: function() {
        return () => {
            console.log(this);
        }
    }
};

obj.a()(); // `this` refers to `obj`, because `this` refers to `obj` in the surrounding function `a`

2. 가장 가까운 주변 모듈

이번 사건에서는 (가짜) 모듈을 하고 있기 때문에,this모듈 스코프에서 유사 모듈 객체(바벨 또는 웹 팩 객체?)로 정의된다.

Object
    __esModule: true
    default: Object
    __proto: Object

Vue는 이러한 속성, 메서드 및 이벤트를 기본적으로 바인딩하기 때문에

그것은 사실이고 그것은 vue의 매우 유용한 특징이다.그러나 화살함수에서는 오버라이드할 수 없기 때문에 이 경우 우리에게 도움이 되지 않는 것은 항상 주변 범위를 가리킨다.

화살표 기능에 대한 자세한 내용은 다음 링크를 참조하십시오. http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

https://vuejs.org/v2/guide/instance.html#Properties-and-Methods을 참조하십시오.

인스턴스(instance) 속성이나 콜백(예:)에 화살표 기능을 사용하지 마십시오.vm.$watch('a', newVal => this.myMethod())). 화살표 함수가 상위 컨텍스트에 바인딩되므로,this네가 기대했던 대로 부에 인스턴스가 되지 않을거야this.myMethod정의되지 않을 것이다.

관찰자에게도 동일한 제한이 적용되므로 다음과 같은 것을 사용해야 한다.

watch: {
    query: function() {
        return debounce(() => {
            this.autocomplete();
        },
        200,
        {
            leading: false,
            trailing: true
        });
   }
}

참조URL: https://stackoverflow.com/questions/44279505/vue-watchfat-arrow-scope-providing-wrong-this-context