Vue watch [fat arrow scope]在此上下文中提供了错误 [英] Vue watch[fat arrow scope] providing wrong this context

问题描述

我正在使用lodash来消除函数调用的抖动，但是我想知道为什么我的 this 值没有继承我期望的范围。

这些是我的Vue组件的相关部分。

 从 lodash / debounce导入去抖动; 
 
手表：{
查询：debounce（（）=> {
 this.autocomplete（）; 
}，200，{
前导： false，
尾随：true 
}），
  

以上情况没有之所以起作用，是因为我的 this 值不指向Vue组件，而是显示如下对象：

  Object 
 __esModule：true 
默认值：Object 
 __proto：Object 
  

我的箭头语法不是应该继承 this 的上下文吗？

以下似乎正常工作：

 查询：debounce（function test（）{
 this.autocomplete（）; 
}，200，{
前导：false，
尾随：true 
}）
  

对此可能有一个简单的答案，但我希望有人可以在这里为我提供帮助。

解决方案

这只是一个额外的答案，用于解释对此在箭头功能中的误解。

在箭头功能中如何使用？

这个始终是指周围的范围。可以是：

1. 最近的周围函数


2. 最近的周围模块


3. 全局范围

如果我们看一下您的代码，并假设您使用的是ES6模块（根据 import / export 语句判断）：

 导入去抖动来自 lodash / debounce； 
 
导出默认值{
手表：{
查询：debounce（（）=> {
 this.autocomplete（）; 
}，200， {
开头：false，
结尾：true 
}），
} 
}； 
  

让我们遍历以下列表：

1。最近的环绕功能

箭头功能没有环绕功能。例如：

  var obj = {
a：function（）{
 return（）= > {
 console.log（this）; 
} 
} 
}; 
 
 obj.a（）（）; //`this`指的是obj`，因为`this`指的是周围函数`a` 
  

2。最近的周围模块

由于在这种情况下我们位于（伪）模块中，因此此在模块范围内被定义为伪模块对象（可能是babel或webpack对象？）。

  Object 
 __esModule ：true 
默认值：对象
 __proto：对象
  

因为Vue默认绑定这些属性，方法和事件

这是真的，这是vue的非常有用的功能。但这对我们没有帮助，因为 this 不能在箭头函数中覆盖，它始终引用周围的范围。 / p>

请查看以下链接，以更深入地了解箭头功能： http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

I am using lodash to debounce a function call but I am wondering why my this value is not inheriting the scope like I expect.

These are are the relevant parts of my Vue component.

import debounce from 'lodash/debounce';

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

The above case does not work because my this value does not point to the Vue component but rather shows an Object like this:

Object
    __esModule: true
    default: Object
    __proto: Object

Isn't my arrow syntax suppose to inherit the context of this?

The following seem to works fine:

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

There is probably an easy answer for this but I am hoping someone can help me out here.

解决方案

This is only an additional answer to explain the misunderstanding of this in arrow functions.

How does this work in arrow functions?

this in lexical functions always refers to the surrounding scope. That can either be:

1. The nearest surrounding function
2. The nearest surrounding module
3. The global scope

If we have a look at your code, and we assume you're using ES6 modules (judging from the import/export statements):

import debounce from 'lodash/debounce';

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

Let's go through the list:

1. The nearest surrounding function

There is no surrounding function for your arrow function. An example would be:

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. The nearest surrounding module

Since we are in a (fake) module in this case, this is defined in the module scope as pseudo module object (probably a babel or webpack object?).

Object
    __esModule: true
    default: Object
    __proto: Object

It seems because Vue binds these properties, methods and events by default

That's true and it's a very useful feature of vue. But it doesn't help us in this case, because this cannot be overridden in an arrow function, it always refers to the surrounding scope.

Have a look at the following link for a deeper understanding of arrow functions: http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

这篇关于Vue watch [fat arrow scope]在此上下文中提供了错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！