javascript - Vue 3 如何观看地图
问题描述
我将地图传递给组件,然后发回新值并更新地图。这会触发地图上的手表,但传递的新旧值是相同的。
在这种情况下,是否有可能让手表接收旧值?
(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>
解决方案
发生这种情况是因为对旧的和新的引用是相同的。这是一种解决方法。与其直接观看参考资料,不如观看参考资料的传播,这确实会发生变化。它必须在函数表达式中完成,因为传播不是反应性的:
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'));
});
由于展开将地图转换为数组,因此您可以在手表内部将值转换回地图。
这是你更新的小提琴
推荐阅读
- php - 用 Lua 表结构解析字符串
- glib - 需要对 GMainContext 和 GMainLoop 进行说明
- ios - Bitrise:GoogleMaps 框架未找到问题
- python - Spark DataFrame to Dict - 字典更新序列元素错误
- scala - 使用 Gradle 从单个源项目编译多个 jar
- android - 获取所有 Hashmap 索引大小的总和
- javascript - 如何获取折叠的 Kendo TreeList 行?
- java - 使用页面工厂模型实现无法执行 Appium 执行
- r - 使用 rlang 以编程方式创建命名列表
- java - java - 如何在java中为restful webservices运行简单的junit?