如何使用 jsDoc 在自定义组件中记录此关键字？

Question

我正在使用 Vuejs 内联模板组件，我们在 javascript 文件中注册组件，在 html 中注册模板。

该组件看起来像这样：

Vue.component('compare-benefits', {
  data() {
     // the "this" keyword in methods should refer to this object
     return {
        ...state,
        isLoading: false,
     }
  },
  methods: {
    getData() {
       // I want the "this" keyword here to reference the object return in data above 
       this.isLoading = true;
    }
  }
})

如果您不熟悉 Vue，这里发生的事情是 Vue 框架会将this您的方法中的关键字绑定到您从 data() 方法返回的对象。

我如何在此处使用 jsDoc 并告诉它this此处的关键字实际上是在引用该对象？

编辑：使用 jsDoc 的主要原因不是创建文档，而是在 vscode 中使用智能感知和类型检查@ts-check

Answer 1

的this关键字Vue framework是类型的对象Vue。您可以通过在您的getData方法或任何其他方法中调试您的代码来识别它。此外， 的Vue data属性为this。我在下面上传了一个屏幕截图，供您从我目前正在处理的一个示例中查看：

结果，您使用 jsDoc 后的代码将是这样的：

Vue.component('compare-benefits', {
    data() {
        return {
            ...state,
            isLoading: false,
        }
    },
    methods: {
        /** @this Vue */
        getData() {
            this.isLoading = true;
        }
    }
})