Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8lu2zAQ/ZUpe5ADOHaK3FQlXYIcWqAL2qInXRhpJDOhSIGL4sDwv3eG8hY38YnkzPDxzeOblfjU97MhoshF4Sun+gAeQ+yvS6O63roAK3DYwBoaZzvIqDTbpW5s12/iszkfGCl7X5rSVNb4AHfWarhigEkjtcczyhXz8R16gQ4Bu17LgHQCKKxOK+20uq60qh6gdfIJ7rSlbVAd+mJOqYOiBVKGX7MaZ9q2R/msdzgoG30G0tSQySago71DkPpRPnnwssMpqADKE040lFcmRBXUgDuwYr6hVqSeh/PO1qjzQeqIV6XgPksBcyop5gctiakInsg1qp3de2tI5RWjlKIiGKXR/eiDIvKlyCFlOCe1to9fUyy4iNNtPPX6QvzeLzlWip8OPboBS7HLBelaDGP69vd3XNJ+l6QmoqbqE8lfSMJG5jiWfY6mJtoHdYntl2QIZdo//nYZ0PhtU0yUK9epvhRkEFbwtdb3dC9nl+leadak4tZcp2zKksaA9RRqbJTBb/xFz4xL7ht9mX7vL38eufOgepKlH82mBEdhGXXIITkX1uzd7f1AUtHN7YuTyRlcXcNkDztLOPABMhYggxyyBJOdjTBNNBV3D9bcsM0JIGlwYOTJ3rrTA8IjMqPAf1Gi9OY4lgqfwY4j8DImyX1qPms1wMc0l2T6HfVSbAZuVJTmaLVihdaExqNDt44Hg44+PGkEmo4ea4owdJLgUdVhkcO7i4t+mcgvULUL+od95E5WD62jWa3PK6uty+FtXddjp9F5DvSWhhjdriV+jAdy/Q9V465q

Steps to reproduce

1. click gray block times
2. check console.log
3. 'previous' and 'after' are always same, it is counterintuitive

What is expected?

previous: false
after: true

or

previous: true
after: false

What is actually happening?

System Info

No response

Any additional comments?

No response

This behavior is expected. Within defineModel, the value of modelValue is changed through event notifications, and it is modified by the parent component. When it changes, it triggers the update of the component. Since component updates are asynchronous, you must wait until the component is updated to obtain the latest value. You can use nextTick to retrieve the most up-to-date value.

function onClick() {
  console.log('previous', modelValue.value);
  modelValue.value = !modelValue.value;
  nextTick(() => {
    console.log('after', modelValue.value);
  })
}

As Alfred stated

@Alfred-Skyblue Thank you for response in minutes. So modelValue.value = xxx is equal to emit('update:value', xxx) with its setter essentially, right? But the code, from JS side, it looks not the same way, it is counterintuitive as mentioned in title. It likes MagicCode. I understand that it works as design.

Thanks again.