在 Vue 3 挂钩中，`this` 内的返回类型对象始终为 `undefined`答案

【问题标题】：In Vue 3 hook, in the return type object inside `this` is always `undefined`在 Vue 3 挂钩中，`this` 内的返回类型对象始终为 `undefined`
【发布时间】：2021-09-25 18:08:51
【问题描述】：

谁能告诉我，为什么在下面的代码中，在返回块中，this 保持undefined？

export const useAutoSave = (
  cacheKey: string,
  interval: number,
  getSaveData: () => Omit<SaveDto, 'savedTime'>,
) => {
  let timer: any
  const { storage, reset } = useStorageObject<SaveDto>(
    SaveDto,
    'auto-save-' + cacheKey,
    false,
  )
  const save = () => {
   // ...
  }
  return {
    reset,
    getPrevSaved() {
      return storage
    },
    save,
    track() {
      console.log(this) // <-- why is `this` `undefined` here?
      this.disposer() // <-- reference error
      timer = setInterval(save, interval)
    },
    disposer() {
      clearInterval(timer)
    },
  }
}

【问题讨论】：

标签： javascript typescript vue.js

【解决方案1】：

假设该函数在一个模块中，this is automatically bound to undefined by Babel，导致您观察到的错误。

要使您的代码正常工作，需要事先声明 disposer（就像您对 save() 所做的那样）：

export const useAutoSave = (
  cacheKey: string,
  interval: number,
  getSaveData: () => Omit<SaveDto, 'savedTime'>,
) => {
  let timer: any

  const disposer = () => {
    clearInterval(timer)
  }

  return {
    //...
    track() {
      disposer()
      timer = setInterval(save, interval)
    },
    disposer,
  }
}

【讨论】：

【解决方案2】：

请参考functional components migration guide和Vue 3 functional components documentation。

您应该将props 和context 作为参数传递给功能组件。

const FunctionalComponent = (props, context) => {
  // ...
}

【讨论】：

不在 vue 3 设置范围内，只是在挂钩中。