Vue 3 如何观看地图

Posted 2023-02-22

【中文标题】Vue 3 如何观看地图

【英文标题】：Vue 3 how to watch Map

【发布时间】：2021-03-20 07:19:04

【问题描述】：

我将映射传递给组件，然后返回新值并更新映射。这会触发地图上的手表，但传递的新旧值是相同的。

在这种情况下是否有可能让手表接收旧值？

(function() 

const ui = 
setup() 
  const map = reactive(new Map([
    ['width', 800],
    ['height', 400]
  ]));

  function onCompUpdate(evt) 
    console.log(map.get('width'), map.get('height'), evt[0], evt[1]);
map.set('width', Number(evt[0]));
    map.set('height', Number(evt[1]));
  
  
  watch(map, (n,o)=>
  console.log(n.get('width'), n.get('height'), 
  o.get('width'), o.get('height'));
  );

  return  map, onCompUpdate ;
  ,
;

const vueApp = createApp(ui);

vueApp.component('base-input', 
props: ['some' ], emits: ['comp-update'],
setup(props,  emit ) 

  let chars = ref(Array.from(props.some.values()).join(','));

  function checkInput(val) 
    emit('comp-update', val.split(','));
    chars.value = val;
  

  return  chars, checkInput ;
,
template: `<input type="text" spellcheck="false" :value="chars"
input="checkInput($event.target.value)"/>`
);

vueApp.mount('#vue');

)();

html：

<div id="vue">
  <base-input :some="map" @comp-update="onCompUpdate($event)"></base-input>
</div>

小提琴： https://jsfiddle.net/tfoller/sm28u7r0/35/

【参考方案1】：

发生这种情况是因为对旧的和新的引用是相同的。这是一种解决方法。与其直接观看参考资料，不如观看参考资料的传播，这确实会发生变化。它必须在函数表达式中完成，因为展开不是反应式的：

watch(() => [...map], (nArray, oArray)=>
    const n = new Map(nArray);
    const o = new Map(oArray);
    console.log(n.get('width'), n.get('height'), o.get('width'), o.get('height'));
);

由于spread 将地图转换为数组，因此您可以在手表内部将值转换回地图。

这是你的updated fiddle

【参考方案2】：

只有在整个地图被替换时才会触发手表。如果你想观察突变（添加/删除项目），你需要像这样设置deep: true：

watch(myMap, () => 
  // myMap was mutated
,  deep: true )

Working SFC Playground example