Subscribe on changes!

script setup make normal script exception

avatar
Aug 10th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNptUstuwyAQ/JUVl7RSYqtXy43Un8iJC7E3MakNCJakkeV/74IfSqVysPcBM7OjHcWXc8U9oqhEHRqvHUFAiu4oTVlCsANCY1uEDj3uYVDfCNTpAKHRzhNwZCwBDo6e0jTWBIJoYsCT8vAJO2522lx30tTlDM/AnGwxANNkxLvyWp17hNDZ2LdmR3BGYCjQBogZekWYHswsnW5bNAvNnDALwL+QD933YO/oH15TmoBZFI/mvHXo6ZkoWkUKrCNtWWDGYARNcIoI+OOwIbX2ZgUmITD5PMtGznctO9PiRcWeYEw1yOhv70sC4Nljb9ZmOgmtgt0sIIOlM81B/vHnr4mrKdnGuvs4juOLLdNUl1x76WXBW7kut/diL/SQVB8G5YpbsIbXIWuTSyNIUa1qpeB9SbkUHZELVVmGS5OW6BYK668lR4WPhvSABYbhcPb2EdAzsBTLIJOYfgFfS9eg

Steps to reproduce

  1. use both script setup and script normal
  2. write some code in script setup, make this sciprt setup is not empty
  3. declare any variable top level in script normal
  4. declare same property in data options api
  5. use it in template

What is expected?

expect to used the property in data options api, but not the top level variable in script normal

What is actually happening?

template used top level variable in script normal property with the same name in the options API does not work

System Info

No response

Any additional comments?

example.zip

avatar
Aug 10th 2022

image

avatar
Aug 10th 2022

To me this is expected behaviour. script setup makes all top-level variables available in the template. That would take precedence over this Options API data option.

Sidenote: Mixing the options API with script setup is absolutely no recommended, and was not an intended use case that we had in mind or seriously tested for when designing this. Yes, technically it kinda works as a side-effect of the implementation, but our recommendation is: Do not ever mix Options API and script setup, except for the few actual config properties that do not have a counterpart, like inheritAttr: false.

We might in fact throw warnings during development for invalid usage like this one in future minor version.