Subscribe on changes!

Data binding does not update for transpiled app

avatar
Jan 20th 2021

Version

3.0.5

Reproduction link

https://github.com/Juanc1to/issue-vue-3-transpile-binding.git

Steps to reproduce

  1. Clone, run npm i, then npm run build in the cloned repository.
  2. In the dist directory, run python -m http.server, then navigate to "http://localhost:8000/" in your browser.
  3. Choose "Add an item" twice.
  4. For the second item, choose "Check", then change the selection for that item to "Tails", then change it back to "Heads".

What is expected?

The string "Correct (true)!" should be displayed at the end of this sequence.

What is actually happening?

"Correct (true)!" is initially displayed, then on updating the guess to "Tails", the notification is changed to "Alas, it's actually Heads.", and the notification does not update back to "Correct (true)!" when updating the guess (a second time) to "Heads".


This happens with npm run build, but not with npm run serve. With the app being deployed with the development server, the app works as expected. As a result, this may be a bug somewhere in the toolchain; if so, I would be grateful for advice about where best to report this.

avatar
Feb 10th 2021

The hoisted DOM may be reused, since only static DOM nodes will be hoisted, therefor we use cloneNode to generate clones of it in the production env, but this will not copy custom DOM props. In the patchDOMProp, we store the actual value of DOM in the _value property, so we need to keep it when doing clones.