why "defineModel" API work so weird?

[hanzhenfang]

I'm a new Vuer, my Vue version is <3.4+> and I found the defineModel API in the Official Doc. But there must be something I missed.

Below is My Parent.vue Component

<script lang="ts" setup>
import { ref} from "vue";

import Context from "../Context.vue";

const count = ref(100);
</script>
<template>
  <Context v-model="count" />
</template>

And the Chiled.vue Component:

<script lang="ts" setup>
import { ref, nextTick } from "vue";
const n = ref(0);

const count = defineModel({ type: Number, default: 13 });

count.value += 1;
count.value += 2;
count.value += 3;
count.value += 4;
console.log(count.value); // why there log--- 100？

nextTick(() => {
  console.log(count.value); //why there log ----104？
});
</script>

[hanzhenfang]

The project screenshot

[hanzhenfang]

Can someone help me? Thanks a lot.😊

[Hecto-Data]

Can you change a variable name count on a Child component as a childCount ??

[hanzhenfang]

I have tried, but nothing changed. :(

[hanzhenfang]

And I find another puzzling scene

[SummerGua]

You should never update the v-model value in a child component due to one-way-data-flow, you can update it in parent component instead.

Why nextTick outputs 104:
Vue merges multiple data updates to one update to avoid some performance problems.
Vue2 doc has some explanation doc link

[hecticme]

You're right, it does not seem to work like a normal ref. Here is my guess:

• Under the hood, v-model on component will expand into a respective pair of prop and event. https://vuejs.org/guide/components/v-model.html#under-the-hood.
• You can try console.log() a normal ref first, and then logging a ref value returned from defineModel(). You will see that the two objects are different. RefImpl is the normal ref, and CustomRefImpl is the ref value of defineModel(). The setter of CustomRefImpl will probably emit the event to update the prop.
• Emitted events might be merged into a single batch first for optimization before being updated.
• When you try to mutate the model ref value directly, Vue is probably emitting an event to update the prop under the hood. That's why the value does not change until the next tick, and it only accept the value of the last mutation.