disable-devtool 包在路线导航后不更新参考值

Question

我在我的应用程序中使用Vue 3，并实现了disable-devtool包来检测浏览器的开发人员工具何时打开或关闭。当我第一次加载组件时一切正常。但是，当用户重定向离开然后导航回该组件时，即使没有抛出错误， isDevToolsOpen 和 counter 等 ref 值也不会再更新。就好像 Vue 在路由更改后停止跟踪这些 ref 变量的变化。

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import DisableDevtool from 'disable-devtool'
import router from '@/router'
import { useCreateLog } from '@/composables/controls/useCreateLog'

const isDevToolsOpen = ref(false)
let devToolsTimeout = null
let isLogged = false
const counter = ref(0)

const { createLog } = useCreateLog()

DisableDevtool({
  ondevtoolopen: () => {
    isDevToolsOpen.value = true
    counter.value++
    if (!isLogged) {
      createLog('Developer tools opened')
      isLogged = true
    }
    if (!devToolsTimeout) {
      devToolsTimeout = setTimeout(() => {
        router.push({ name: 'ProductList' })
      }, 5000)
    }
  }
})

onMounted(() => {
  DisableDevtool.isSuspend = false
})

onUnmounted(() => {
  DisableDevtool.isSuspend = true
})
</script>

Answer 1

DisableDevtool

是一个单例，除了 isRunning 之外，没有用于清理的 API。挂起它会阻止组件在再次安装时对其进行初始化。它应该在未卸载的组件（根组件）中使用，或者强制重新初始化：

onMounted(() => {
  DisableDevtool.isRunning = true
})

onUnmounted(() => {
  DisableDevtool.isRunning = false
})