Vue3组件销毁时如何正确清理input焦点相关资源

// AutoFocusInput.vue
<template>
  <input 
    ref="inputRef" 
    type="text" 
    @focus="handleFocus"
    @blur="handleBlur" 
  />
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
 
const inputRef = ref(null)
const focusHandler = () => {
  console.log('input focused')
}
const blurHandler = () => {
  console.log('input blurred')
}
 
onMounted(() => {
  const input = inputRef.value
  input.addEventListener('focus', focusHandler)
  input.addEventListener('blur', blurHandler)
})
 
// 清理事件监听器
onUnmounted(() => {
  const input = inputRef.value
  if (input) {
    input.removeEventListener('focus', focusHandler)
    input.removeEventListener('blur', blurHandler)
  }
})
</script>
 

// DelayFocusInput.vue
<template>
  <input ref="inputRef" type="text" />
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
 
const inputRef = ref(null)
let focusTimer = null
 
onMounted(() => {
  // 设置定时器
  focusTimer = setTimeout(() => {
    inputRef.value?.focus()
  }, 1000)
})
 
// 清理定时器
onUnmounted(() => {
  if (focusTimer) {
    clearTimeout(focusTimer)
    focusTimer = null
  }
})
</script>
 

// focus.ts
export const focus = {
  mounted: (el, binding) => {
    // 保存原始的tabIndex
    el._originalTabIndex = el.tabIndex
    el.focus()
    
    // 添加事件监听器
    el._focusHandler = () => {
      console.log('focused')
    }
    el.addEventListener('focus', el._focusHandler)
  },
  
  // 在指令卸载时进行清理
  unmounted: (el) => {
    // 恢复原始tabIndex
    if (el._originalTabIndex !== undefined) {
      el.tabIndex = el._originalTabIndex
    }
    
    // 移除事件监听器
    if (el._focusHandler) {
      el.removeEventListener('focus', el._focusHandler)
      delete el._focusHandler
    }
  }
}
 

// AsyncFocusInput.vue
<template>
  <input ref="inputRef" type="text" />
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
 
const inputRef = ref(null)
let isComponentMounted = true
 
onMounted(async () => {
  try {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 确保组件仍然挂载着再执行操作
    if (isComponentMounted && inputRef.value) {
      inputRef.value.focus()
    }
  } catch (error) {
    console.error('聚焦失败:', error)
  }
})
 
// 标记组件已卸载
onUnmounted(() => {
  isComponentMounted = false
})
</script>