[bug Mc-10864] – Writing movable underscores in the Tab component ran into a watchEffect trap, and anyway was successfully resolved. Make a learning note here

How to implement moving underscores

  • Create three div nodes for ref, the selected div, the outsourced div, and the underlined div
  • The length of the underline should equal the length of the selected div
  • The left of the underline is equal to the left of the selected div – the left of the outsourced div

Timing of code execution

  • Since several div variables created were initialized to empty, they should be executed on the first render
  • Using onMounted
  • But there is a bug in tab-switching without sliding, so you have to do it again with every update
  • Using onUpdated

WatchEffect was used for code optimization purposes

  • Replace onMounted and onUpdated.
  • Each change is executed.
  • But it will run before it is mounted, so consider placing watchEffect inside onMounted

The functionality should work, but there are bugs

watchEffect bug ?

WatchEffect has been updated for VUE 3 official and RC releases.

BREAKING CHANGES in the document

watch APIs now default to use flush: 'pre' instead of flush: 'post'
Copy the code
  • Flush: The second argument to watchEffect
  • Post: executed after the page has been rendered. Updates to Pre: performed before page rendering
  • I’m using the official version. When watchEffect is not passed, the second argument defaults to Flush :’pre’.
  • Since watchEffect is executed before the page renders
  • However, while the variables are changed during the rendering of the page, the watchEffect has already been implemented, assuming that the variables are still the same value
  • Each watchEffect is the last variable
  • So there’s a bug, there’s a missing underline, there’s a missing stroke
  • {flush:'post'}