运行时自定义类方法缺失：继承Map的DataMap调用异常

算力阿峰

2026-6-21

问题原因

你遇到的问题是Vue 3响应式系统对内置集合类型（如Map）的代理机制导致的。当用ref包裹DataMap实例时，Vue会自动将其包装为响应式代理对象，这个代理仅保留原生Map的方法，你自定义的foo、updateFromList等方法不会被代理，因此调用时会提示“不是函数”。

解决方案

以下是几个可行的解决办法，可根据需求选择：

1. 用`shallowRef`替代`ref`

shallowRef仅跟踪value的替换操作，不会对对象内部做深度响应式代理，这样tenants.value始终是原始的DataMap实例，自定义方法可正常调用：

import { shallowRef } from 'vue'

// 替换原ref定义
const tenants = shallowRef<DataMap>(new DataMap())

2. 用`markRaw`标记实例，禁止响应式代理

若需要保留ref的部分特性，但不想让Vue代理DataMap实例，可使用markRaw标记：

import { ref, markRaw } from 'vue'

const tenants = ref<DataMap>(markRaw(new DataMap()))

此方式下Vue会跳过对该实例的响应式转换，自定义方法可正常调用，但DataMap内部的变化不会触发组件更新，若需响应式需手动处理。

3. 将自定义方法改为工具函数

若必须保持响应式，可将DataMap的自定义方法抽为独立工具函数，传入Map实例操作：

// 工具函数示例
export function foo(map: Map<any, any>) {
  console.log('Foo called...')
}

export function updateFromList(map: Map<any, any>, values: Array<any>, key: string = 'id') {
  values.forEach(item => {
    map.set(item[key], item)
  })
}

// 使用时
foo(tenants.value)
updateFromList(tenants.value, _tenants)