Vue 3 ref(new Map()) 无法触发watch

现象

const map = ref(new Map());

通过 map.value.set(k, v); 不能触发watch

下面验证，map.value.set 并不能触发watch 的监听

代码

<script setup lang="ts">
import { ref, triggerRef, watch } from 'vue';

const map = ref(new Map<string, Record<string, any>>());
watch(map, () => {
  console.log('map change', map.value);
});


function updateMap() {
  map.value.set('1', { name: '1' });
}
</script>
<template>
  <div>
    <button @click="updateMap">updateMap</button>
  </div>
</template>

怎么解决

使用reactive

const map = reactive(new Map())

watch deep

watch(xx,xx, {deep:true})

重新赋值

只有重新给map的ref赋值才能正常触发响应式。

map.value = new Map(map.value)

但是，如果map中数据量非常大的话，不知道这样的map的复制会不会消耗非常多的性能。

记录一下现象，防止被坑。

如果大家有不同的解决办法，欢迎提出交流。