Troubleshooting while using defineModel

[gio-hernandez-saito]

Hello, I'm currently trying to make some visualization component.
I faced on a issue about using defineModel...

Below are some codes...

interface HTopoMapProps extends HVizMargin {
  topoData: any;
  mapRegionData: any;
  prefix: string;
  suffix: string;
  colorRange: [string, string];
}

const props = withDefaults(defineProps<HTopoMapProps>(), {
  top: 20,
  bottom: 20,
  left: 20,
  right: 20
})

const highlightTarget = defineModel<string|undefined>('highlightTarget')

onMounted(() => {
  init()
  update()
})

watchDebounced(props, (v) => {
  console.log(v) // why props is triggerred!!! 
  update();
}, { debounce: 100 })

// draw is called inside update
function draw() {
  // ...
  svg.on('mouseenter', function(_, d) {
   // ... 
   highlightTarget.value = d.id
   })
   // mouseleave too
}

What is quite interesting is that when I trigger 'mouseenter', 'mouseleave' event, watchDebounced is called again.
So I found out from log that highlightTarget, and highlightTargetModifiers are attached inside props.

1. So, is it true that any 'defineModel'-ed variables are set as required properties from props?

And, also I tried to omit two properties...

const excludedProps = computed(() => omit(props, ['highlightTarget', 'highlightTargetModifiers'])) // lodash omit

But watchDebounced(excludedProps) still called....

How can I solve this problem?
I just want to

1. update highlightTarget when mouseenter/leave
2. watchDebounced props "except" highlightTarget

[Wei-Ba]

defineModel

const excludedProps = reactive(omit(toRefs(props), ['highlightTarget', 'highlightTargetModifiers']))
watch(excludedProps, ...)

[gio-hernandez-saito]

Thank you so much :) Can you explain why that worked?

[Wei-Ba]

const props = defineProps<{ a: string, b: string }>() 
const refs = toRefs(props) // refs is { a: Ref<string>, b: Ref<string> }  no watch
reactive(omit(refs, ['a'])) // reactive { b:Ref<string> } -> { b: string }
// ........................................
computed(() => omit(props, [...]))  // wacth `props`

[Wei-Ba]

const props = defineProps<{ a: string, b: string }>() 
const refs = toRefs(props) // refs is { a: Ref<string>, b: Ref<string> }  no watch
reactive(omit(refs, ['a'])) // reactive { b:Ref<string> } -> { b: string }
// ........................................
computed(() => omit(props, [...]))  // wacth `props`

language is chinese ↓
英语不好
computed会捕获内部的响应式数据的变化，会直接捕获到内部的props, 你在computed的getter去过滤属性是无法消除props造成的影响的
toRefs可以将响应式对象转换为ref形式的普通对象,这时候过滤掉属性不会产生影响,再用reactive的重新包装该对象即可

我给你的方法相当于是打碎了重新组装