Version

3.2.27

Reproduction link

codepen.io

Steps to reproduce

1. click Index link
2. click Editor link
3. click back button
4. click new Editor link

What is expected?

When I click the editor link, it show "hello world" in textarea, click back button and click newEditor should show nothing in textarea.

What is actually happening?

When I click the editor link, it show "hello world" in textarea, click back button and click newEditor is still show "hello world"

1. I found it work when I use development version.
2. In production version, I still found two ways can work. add ref or put the div with id "editor" in root div in components. It seems not destroy the div, even if I make quillEditor is null.

I think this has nothing to do with vue.

// if new content is not empty it works fine.
this.content = Number(this.create) ? "<p>Hello World!</p>" : "new val"; 

I think this has nothing to do with vue.

// if new content is not empty it works fine.
this.content = Number(this.create) ? "<p>Hello World!</p>" : "new val"; 

But in vue2 it works good. https://codepen.io/cyanxxx/pen/LYzarZP

I think this has nothing to do with vue.

// if new content is not empty it works fine.
this.content = Number(this.create) ? "<p>Hello World!</p>" : "new val"; 

But in vue2, same code can work well. https://codepen.io/cyanxxx/pen/LYzarZP

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground. Try reproducing without quill or router.

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground. Try reproducing without quill or router.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmltcG9ydCBlZGl0b3JDb250YWluZXIgZnJvbSAnLi9lZGl0b3JDb250YWluZXIudnVlJ1xuaW1wb3J0IGluZGV4IGZyb20gJy4vaW5kZXgudnVlJ1xuZXhwb3J0IGRlZmF1bHR7XG4gICBjb21wb25lbnRzOiB7XG4gICAgZWRpdG9yQ29udGFpbmVyLFxuICAgIGluZGV4XG4gIH0sXG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHBhcmFtczoge30sXG4gICAgICByb3V0ZTogJ2luZGV4J1xuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIGNoYW5nZVJvdXRlKHJvdXRlLCBwYXJhbXMpIHtcbiAgICAgIHRoaXMucm91dGUgPSByb3V0ZVxuICAgICAgdGhpcy5wYXJhbXMgPSBwYXJhbXNcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gPGRpdj5cbiAgPGNvbXBvbmVudCB2LWJpbmQ6aXM9XCJyb3V0ZVwiIDpjaGFuZ2VSb3V0ZT1cImNoYW5nZVJvdXRlXCIgOnBhcmFtcz1cInBhcmFtc1wiPjwvY29tcG9uZW50PlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9ydW50aW1lLWRvbUAzLjIuMjcvZGlzdC9ydW50aW1lLWRvbS5lc20tYnJvd3Nlci5wcm9kLmpzXCJcbiAgfVxufSIsImVkaXRvckNvbnRhaW5lci52dWUiOiI8c2NyaXB0PlxuaW1wb3J0IG15RWRpdG9yIGZyb20gJy4vbXlFZGl0b3IudnVlJztcbmV4cG9ydCBkZWZhdWx0e1xuICBjb21wb25lbnRzOiB7XG4gICAgXCJteS1lZGl0b3JcIjogbXlFZGl0b3JcbiAgfSxcbiAgcHJvcHM6IFtcInBhcmFtc1wiLCBcImNoYW5nZVJvdXRlXCJdLFxuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBjb250ZW50OiBcIlwiXG4gICAgfTtcbiAgfSxcbiAgbW91bnRlZCgpIHtcbiAgICB0aGlzLmNvbnRlbnQgPSBOdW1iZXIodGhpcy5wYXJhbXMuY3JlYXRlKSA/IFwiPHA+SGVsbG8gV29ybGQhPC9wPlwiIDogXCJcIjtcbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiA8ZGl2PlxuIFx0IDxteS1lZGl0b3Igdi1tb2RlbDpjb250ZW50PVwiY29udGVudFwiPjwvbXktZWRpdG9yPlxuICAgPGJ1dHRvbiBAY2xpY2s9XCJjaGFuZ2VSb3V0ZSgnaW5kZXgnKVwiPmJhY2s8L2J1dHRvbj5cbiA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiaW5kZXgudnVlIjoiPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0e1xuICBwcm9wczogWydjaGFuZ2VSb3V0ZSddLFxuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBjcmVhdGU6IHRydWUsXG4gICAgICByb3V0ZTogJ2luZGV4J1xuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIGhhbmRsZUxpbmsoY3JlYXRlKSB7XG4gICAgICB0aGlzLnBhcmFtcyA9IHsgY3JlYXRlIH1cbiAgICAgIHRoaXMuY2hhbmdlUm91dGUoJ2VkaXRvckNvbnRhaW5lcicsIHRoaXMucGFyYW1zKVxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiA8ZGl2PlxuICA8ZGl2IEBjbGljaz1cImhhbmRsZUxpbmsodHJ1ZSlcIj5FZGl0b3I8L2Rpdj5cbiAgIDxiciAvPlxuICA8ZGl2IEBjbGljaz1cImhhbmRsZUxpbmsoZmFsc2UpXCI+bmV3IEVkaXRvcjwvZGl2PlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwibXlFZGl0b3IudnVlIjoiPHNjcmlwdD5cbmltcG9ydCB7IG9uTW91bnRlZCwgb25CZWZvcmVVbm1vdW50LCB3YXRjaCwgdG9SZWZzIH0gZnJvbSAndnVlJ1xuZXhwb3J0IGRlZmF1bHR7XG4gcHJvcHM6IHtcbiAgICBjb250ZW50OiB7XG4gICAgICB0eXBlOiBTdHJpbmdcbiAgICB9LFxuICAgIHJlYWRPbmx5OiB7XG4gICAgICB0eXBlOiBCb29sZWFuXG4gICAgfVxuICB9LFxuICBzZXR1cChwcm9wcywgY29udGV4dCkge1xuICAgIGNvbnN0IHsgY29udGVudCwgcmVhZE9ubHkgfSA9IHRvUmVmcyhwcm9wcyk7XG4gICAgbGV0IHF1aWxsRWRpdG9yO1xuICAgIG9uTW91bnRlZCgoKSA9PiB7XG4gICAgICBjb25zb2xlLmxvZygnY29udGVudCcsIHByb3BzLmNvbnRlbnQpXG4gICAgICBxdWlsbEVkaXRvciA9ICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiI2VkaXRvclwiKVxuICAgICAgY29uc3QgZWRpdG9ySW5wdXQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KFwiZGl2XCIpXG4gICAgICBlZGl0b3JJbnB1dC5jbGFzc0xpc3QuYWRkKCdxbC1lZGl0b3InKVxuICAgICAgcXVpbGxFZGl0b3IuYXBwZW5kQ2hpbGQoZWRpdG9ySW5wdXQpXG4gICAgICAvLyBjb25zdCBlZGl0b3JJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIjZWRpdG9yIC5xbC1lZGl0b3JcIik7XG4gICAgICAgLy9xdWlsbEVkaXRvci5vbihcInRleHQtY2hhbmdlXCIsIChkZWx0YSwgb2xkRGVsdGEsIHNvdXJjZSkgPT4ge1xuICAgICAgICAvL2xldCBodG1sID0gZWRpdG9ySW5wdXQgPyBlZGl0b3JJbnB1dC5pbm5lckhUTUwgOiBcIlwiO1xuICAgICAgICAvL2NvbnN0IHRleHQgPSAgcXVpbGxFZGl0b3IuZ2V0VGV4dCgpO1xuICAgICAgICAvL2lmIChodG1sID09PSBcIjxwPjxicj48L3A+XCIpIGh0bWwgPSBcIlwiO1xuICAgICAgIC8vIHRoaXMuJGVtaXQoXCJpbnB1dFwiLCBodG1sKTtcbiAgICAgLy8gfSk7XG4gICAgfSk7XG4gICAgb25CZWZvcmVVbm1vdW50KCgpID0+IHtcbiAgICAgICAgY29uc29sZS5sb2coJ29uQmVmb3JlVW5tb3VudCcpXG4gICAgICAgIHF1aWxsRWRpdG9yID0gbnVsbFxuICAgIH0pXG4gICB3YXRjaChjb250ZW50LCAobmV3VmFsLCBvbGRWYWwpID0+IHtcbiAgICAgIGlmIChuZXdWYWwgJiYgIW9sZFZhbCkge1xuICAgICAgICBjb25zb2xlLmxvZygnd2F0Y2gnLCBuZXdWYWwpXG4gICAgICAgIGNvbnN0IGVkaXRvcklucHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIiNlZGl0b3IgLnFsLWVkaXRvclwiKTtcbiAgICAgICAgZWRpdG9ySW5wdXQuaW5uZXJIVE1MID0gbmV3VmFsXG4gICAgICAgIGVkaXRvcklucHV0LmZvY3VzKCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG48ZGl2PlxuICAgIDxkaXYgaWQ9XCJlZGl0b3JcIj48L2Rpdj5cbiA8L2Rpdj5cbjwhLS0gPGRpdiBpZD1cImVkaXRvclwiPjwvZGl2PiAtLT5cbiA8IS0tPGRpdj5cbiAgICA8ZGl2IGlkPVwiZWRpdG9yXCIgcmVmPVwiZWRpdG9yXCI+PC9kaXY+XG4gPC9kaXY+IC0tPlxuPC90ZW1wbGF0ZT4ifQ== I hope it clear enough. I am not good at realize router and quill. And the same result is work in development version, but the production version not work.

Finally, I find the problem. Because the hoisted vnode. The '#editor' will be consider as static element. First time will be created and the second time beacuse the vnode was created before, the vnode.el already been set. So it just clone the el element. And because the branch condition, development will not cloneNode so the development environment work. And production not work. https://github.com/vuejs/core/blob/4e7b36f5c3ee72cb9554982dd174f1989d5488f6/packages/runtime-core/src/renderer.ts#L632