可以在 vue.js 应用程序中排除 `this` 关键字吗？答案

【问题标题】：Can be exclude `this` keyword in vue.js application?可以在 vue.js 应用程序中排除 `this` 关键字吗？
【发布时间】：2018-08-30 12:30:29
【问题描述】：

其实我关注的是Douglas Crockfordjslint。

当我使用它时它会发出警告。

[jslint] 意外的“这个”。（unexpected_a）

我看不到该错误的任何解决方案。不要说在jslist.options中添加this并标记为true。

有什么办法不用这个吗？

编辑添加代码

//这里有一些vue组件

   <script>
    export default {
      name: "RefereshPage",
      data() {
        return {
          progressValue: 0
        }
      },
      methods:{
        getRefreshQueue(loader){
          console.log(this.progressValue); // ERROR come here [jslint] Unexpected 'this'. (unexpected_a) 
      }
    }
   }
    </script>

看看这个 jsfiddle。如何避免使用它？

https://jsfiddle.net/himmsharma99/ctj4sm7f/5/

【问题讨论】：

这没有意义。您正在 linting 的代码是什么样的？
看看小提琴。
您的代码似乎正确，您可以考虑修复 jsLint 或尝试使用 esLint，(from here)。
不，这就是 vue 的工作原理
Linter 可以帮助您标记潜在问题，但它们并非无误。如果某个规则在您的特定应用程序中没有用，您应该禁用它，尤其是对于像 jsLint 这样特别固执己见的规则。

标签： vue.js vuejs2

【解决方案1】：

正如我在 cmets 中所说的：

使用this 是 vue.js 如何在组件中工作的一个组成部分。您可以在此处阅读有关它如何代理和跟踪依赖项的更多信息：https://vuejs.org/v2/api/#Options-Data

【讨论】：

【解决方案2】：

正如其他人所说，最好禁用 linter 或切换到 ESLint。但是，如果您坚持使用解决方法，则可以在 vue 实例上使用 mixin 和 $mount 方法来避免完全使用 this ..

    let vm;

    const weaselMixin = {
        methods: {
            getdata() {
                console.log(vm.users.foo.name);
            }
        },
        mounted: function () {
            vm.getdata();
        }
    };

    vm = new Vue({
        mixins: [weaselMixin],
        data: {
            users: {
                foo: {
                    name: "aa"
                }
            }
        }
    });

    vm.$mount('#app');

See the modified JSFiddle

如您所见，这只会使应该相当简单的组件变得复杂。它只是表明你不应该为了满足你的 linter 而破坏 vue 的工作方式。

我建议你通过this article。这部分尤其重要..

Vue.js 代理我们的数据和方法在 this 上下文中可用。因此，通过编写this.firstName，我们可以访问数据对象中的firstName 属性。请注意，this 是必需的。

【讨论】：

【解决方案3】：

在您发布的代码中，您似乎在 getRefreshQueue 定义后缺少}。这不是您的 linter 描述的错误，但它可能被语法错误弄糊涂了？

【讨论】：

添加 } 有问题

【解决方案4】：

可以使用新的Composition API。 Vue 3 将具有内置支持，但您可以使用 this package 获得 Vue 2 支持。

没有this的组件示例（来自vuejs.org）：

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

【讨论】：