watch: { $route: { immediate: true, handler (route) { this.updateCurrentPath(route.path) this.list = route.matched.map(item => { return { name: item.name, label: this.routesMap.get(item.name) } }) } } }改用setup和ts编写这个函数

好的，以下是使用 `setup` 和 TypeScript 重写这个函数的示例代码：

import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
import { RouteLocationNormalized } from 'vue-router'

export default defineComponent({
  setup() {
    const currentPath = ref('')
    const routesMap = new Map([
      ['home', '首页'],
      ['about', '关于'],
      ['contact', '联系我们'],
    ])
    const list = ref<Array<{ name: string; label: string }>>([])

    const updateCurrentPath = (path: string) => {
      currentPath.value = path
    }

    const updateList = (route: RouteLocationNormalized) => {
      list.value = route.matched.map(item => ({
        name: item.name as string,
        label: routesMap.get(item.name as string) as string,
      }))
    }

    onMounted(() => {
      updateCurrentPath(window.location.pathname)
      updateList({ ...$route })
    })

    onBeforeUnmount(() => {
      // do cleanup work here
    })

    return {
      currentPath,
      list,
    }
  },
})

需要注意的是，在 `options API` 中，我们可以直接使用 `$route` 对象来监听路由变化，而在 `setup` 函数中，我们需要通过 `useRoute` 函数来获取 `$route` 对象。此外，在 `setup` 函数中，我们还需要手动处理组件的生命周期钩子函数。