vue3 组件实例未销毁?

Question

<script setup>
import { useDocumentVisibility } from '@vueuse/core'
import { timeFormat } from '@/utils/time.js'
import { scrollToTop } from '@/utils/dom.js'

const visibility = useDocumentVisibility()
const searchQuery = reactive({
  page: 1,
  size: 14,
  status: '',
  account: '',
  postId: ''
})
const searchQueryFormRef = ref(null)
const state = reactive({
  pageList: []
})
const totalPage = ref(0)

let autoUpdateTimer = null
const autoUpdateCheck = ref(false)
let getListSignal = null


function clearAutoUpdate() {
  if (autoUpdateTimer) {
    clearTimeout(autoUpdateTimer)
    autoUpdateTimer = null
  }
}

function getList(goTop = false) {
  // if (getListSignal) {
  //   getListSignal.abort()
  // }
  // getListSignal = new AbortController()
  window.aaa += 1
  console.log('window.aaa', window.aaa)
  api.queueList(toRaw(searchQuery), {
    // signal: getListSignal.signal
  }).then((res) => {
    window.aaa -= 1
    console.log(res.data.data[0])
    state.pageList = res.data.data
    totalPage.value = res.data.totalPage
    console.log('autoUpdateCheck.value', autoUpdateCheck.value)
    console.log('visibility.value', visibility.value)
    if (autoUpdateCheck.value && visibility.value === 'visible') {
      autoUpdateTimer = setTimeout(() => {
        getList()
      }, 1000)
    }
    goTop && scrollToTop()
  })
}

watch(visibility, (current) => {
  console.log('current', current)
  console.log('autoUpdateCheck.value', autoUpdateCheck.value)
  console.log('visibility.value', visibility.value)
  if (current === 'visible') {
    if (autoUpdateCheck.value) {
      getList()
    }
  } else {
    clearAutoUpdate()
  }
})

function searchList() {
  searchQuery.page = 1
  getList(true)
}

function paginationChange(val) {
  console.log(val)
  searchQuery.page = val
  getList(true)
}

function resetSearchForm() {
  searchQueryFormRef.value.reset()
  searchList()
}

searchList()

function autoUpdateChange(e) {
  console.log(e)
  if (e) {
    getList()
  } else {
    clearAutoUpdate()
  }
}



onMounted(() => {
  console.log('onMounted')
})
onActivated(() => {
  console.log('onActivated')
})
onDeactivated(() => {
  console.log('onDeactivated')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  clearAutoUpdate()
})
onUnmounted(() => {
  clearAutoUpdate()
  console.log('onUnmounted')
})
</script>

vue3
接口pending 的时候，切换路由，理论当前实例会被销毁，autoUpdate 变量 和 visible 变量都不存在了，但是打印出来仍然存在。导致离开页面了，定时器还在执行。

关键点在，路由已经切换了 if (autoUpdateCheck.value && visibility.value === 'visible') 这个条件依然成立，导致定时器执行

1.组件实例为什么没有销毁

生命周期都正常执行。
页面没有keep-alive

Answer 1

• 你还在用的变量都不会销毁，即使只是console.log。
• 定时器需要手动销毁，如果嫌麻烦，可以自定义一个hook，比如 useMyInterval
• 即使定时器销毁了，但你的网络请求依然在执行，也只能手动abort请求或者组件销毁后判断以下，不执行请求回调里的操作