Subscribe on changes!

string template (multiple call) does not rendered correctly

avatar
Dec 31st 2022

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNq1VV1v2jAU/St30SRaDRJK95QBWtdJUx+6SZvUl2US+TDgLrFT2wkwxH/f9UdCgG5q9/HQyr6+Offc6+PD1rsqS7+uiBd6Y5kKWirIY7aYRJ6SkQeSqKqcRgyAFiUXCraw7EPKi5LmpA+CxKmitVnN+8DZOzLngtzyiim9NQuS9WFB1HUlBGHqhkkVs5TADuaCF9DD4r03nQqYlBFxx3hGXIYfdGKarM7XX6QcwQArFu9jFcOk5XO21ccAcZKGMOy7TZyE0PvQM9vd+QnGLVFLnj2CQlkqSIHcQzg7h8kUXBza0j4Wwg+Hpg9TKydCnXWPX/UwIdkAQsWK3H3EVnqag87eHVJaUZbxlV8rgswmbRGdvGesyFofzsZJpRRn8DbNafod723fit8Sj7zpYWlQF+PAfjmdGRZ71NHfwI6OYPXfgSzOuiMMgu51+4oUZY5YSMAQMQhuLOPAyhPFiJsm00hzLMuYaQUiTfJwlWU3jCI3SPNYSq3kSyRqJ21Gmm1YXNDUyPiFAQg0gsVKBARu9ScTaNs/ArNtDmoja0tV1BdIMtSwgwzv15XQV93GC1PvoLg+qwcaR7eGY0IOY/dCLP6Tao/+SW1EOS0+DjrXg1upNjkBmfKSZIaRry6bN7SimVqG8Ho4LNfuNaQ85yJEopkLzDlTA0l/kBBGTdrOKEIDI6LX96x5DIq49O8lZ2hnpkDkDtDLwqZk5KGF6H3kLZUqZRgEcp5qX7mXPheLAFe+QKnSgvhEFoNE8JUkAoEjz3mJwQgwWGPftn0ifod5lHqC63raYStHZve4M2PXrSNnZE4ZuUY1c4aafIrbRsy+988ds50cA1n/KwXHfprhNSppA/imNiXezNdPyT1J1Tc3IMD7e6goXmIISlTEha3TWRgrqecAzeNcHiPV+tX9CqQPX5SgbPEkVva/+cVDj3KAjS0aJz6dKybGEmK2cVLVib6m0PWyZ5npkuYZvNwaoIpmuyM/NZ5pDvFe1hv/JS8VRY7/q54dSmL8+9rYnJ6NjVrby/YBm2Ztvg02xEKYzTDg7JysjXhRcXGVH+gQj1uv93Y/AQ+96j8=

Steps to reproduce

SFC shows an error, but it's OK in vite environment. 8

A couple of issues:

  1. change template in parent "onBeforeMount", result is OK, but can only change once.
  2. change template in child, only "setup" works, other lifecycle do not work.
  3. base on my program, template is changed twice, but the text shows the first change result.
  4. getCurrentInstance().type.template works OK, getCurrentInstance().proxy.$options.template not OK

What is expected?

if comp is called twice, there should be a way to change template twice.

What is actually happening?

Hard to explain the logic behind all these symptom

System Info

No response

Any additional comments?

No response

avatar
Dec 31st 2022

Hi there.

It would be very helpful if you could explain what you are actually trying to achieve. I have a hard time understanding that from the code example. Also, if the example can't be run in the SFC playground, please provide a repository instead where it does run.

But it seems like you want to replace a template on the same component multiple times? That is not supported, plain and simple.

The template is compiled to a render function on the first render. After that, changes to the template will not matter because the component not has a render function, which will take precedence. Otherwise we would have to re-compile the template over and over.

So if that's what you want to achieve: that won't work.

avatar
Dec 31st 2022

OK, I'll try to show you other playgrounds. I understand what u're saying, and the current solution has solved my issues. But still think the string template can be improved, at least more detail can be revealed behind the compiler.

avatar
Dec 31st 2022

idea is to build a shell comp, the parent passes all the data/functions/template to it. Just like functional comp, but it can change the template. The same issue as I said before, why VUE doesn't allow us to modify the template? I'm thinking to raise a discussion late on.

avatar
Dec 31st 2022

why VUE doesn't allow us to modify the template?

Because we so far don't see the use case / need.

  1. Usually, each component has exactly one template
  2. if you need the same component but with a different template, the usual way would be to create copy of the component with a new template
  3. recompiling the template over and over in case it was changed would be a performance nightmare.

If you think you have a case where 2. is not a good enough solution, I suggest to start a discussion and then maybe an RFC if you find a good API proposal.

I'll however close this issue as it works as designed.