Subscribe on changes!

v-memo doesn't work with v-if

avatar
Sep 4th 2022

Vue version

3.2.38

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UEtuwjAQvcrUG4ogcVU2FQ0RPUfdRTATkoI/sp2wiHL3jpMU0VRiN+/N+4ymYx/Wpm2DbMsyL11tA3gMjc2FrpU1LkAHDkvooXRGwYKki3ehhZZGe9JW5gq7qHgOrsHlLy9No8O0eFmSIeNjOuUSCKjspQhICCDzttDQJnW5EywGCkZIoTKEP4ekL8HyrhvGvqcoMuQweA9NCEbDXl5qeZ781Ps05uSyKvQJhzMzPmrHzrlvyF6tomWcbnLqyfjtYLZm418SVdj02xtNn+tipJgWXrAtDEzk6F8RC1aFYP2W80bb8ymVRvE97bijslphcjRqv0lf080bP9Y+3PMpepUcnLl6dNQo2PounBPZoksc6iM6dA/LZto/hbPdv9LY2Qvds/4HLEzDqw==

Steps to reproduce

  1. click the button "count++"
  2. click the button "change show"
  3. click the button "change show"
  4. click the button "count++"

What is expected?

  1. the count display in the will increase
  2. the will remove
  3. the will show
  4. the count display in the will increase

What is actually happening?

  1. the count display in the will increase
  2. the will remove
  3. the will show
  4. the count display in the will NOT increase

System Info

window 10
vue 3.2.38

Any additional comments?

No response

avatar
Sep 5th 2022

workaround: use v-show instead.

  <span v-show="show" v-memo="[count,show]">{{count}}</span>