search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.64k stars 8.33k forks source link

Script Hoisting #6848

Closed louiss0 closed 2 years ago

louiss0 commented 2 years ago

Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#eNp1Uk2PmzAQ/StTqxIkSrD2GpFIVS/dw14qVb34wsIQWIFt2YYeEP+9z7CkqKu9oPF8PN57M5P4Zm02DiwuIvela20gz2GwN6Xb3hoXaCLH9YmMfjGDDlzRTLUzPSWYSh5d301v3/OZjI8IirLSpdE+UO/vdI1IafKDu87Qb+O66ktyUFoej6T0kZ6pKUamoizZewqG6kGXocX4ChwaplcTAsJWU8OOCXOFrohH1hGb/HAvHLCk0g++adGxC788uxd/x+/2pfRwvQHMDuEn11ltysGnh6VH6VyufsAJPHYxbcY0704oAa1KoAI+q9wNE5q/RtF66DrgPiTRnlR6mOIshvFZCqkSA2pKxJn5I5vAve2KwIQnUd48Ed2maTF5nnPZPK35hQWN595U3F2VQF2JaBTijSESa3NcmkSYyw39Jk5i1XruC5u9eaNxJgtXzC8Fr8SFVvabDRcETQjWX6T0dRnv4M1nxt0loszB+LbnjH1/fnXmD1QCWInTDkMiObI7O9YVtgwbPsf8r/UDboSFgTOkbFcJDTsLF0Ofk3694G31/yyY/wJYqRZS

Steps to reproduce

Just open the link to the page

What is expected?

I expected the <script setup> block to be the first script to be executed and then the script created after it to have to export default an object and then the options would be merged that way.

What is actually happening?

When the two scripts have merged the code from the script blocks is hoisted to the top of the overall script that is generated. The code from <script setup> is written to the bottom of the screen it allows. The code that is written in <script setup> has access to the code that is written in every other script. This is not good behavior. I was going to ask for a <script components> block but didn't think it was possible. Even though I like this behavior since I don't have to register components anymore. I can also split my components into many pieces and avoid creating huge templates. The way this works is not good.

image

  1. <script setup> should not have any access to code written in other script blocks
  2. If another script block is used the developer should control whether or not it should have access to what is returned inside of setup
  3. Ideally there should only be an export default block and a script block.
  4. The setup block and any other script blocks should be isolated from each other.
  5. When it comes to Component Registration When I create a component inside of an export default block It should only be avaliable to the component that it is being called inside of

System Info

No response

Any additional comments?

I ran into this while creating an Astro project for myself. I wanted to practice creating sites. I was refactoring the app so that I could then look at the code base and read the code better when I go back to reading it. I can understand it. I wanted to try to split my components into pieces and then I found out that my components were working even though I did not register them.

I gave suggestions on how to fix this problem. But to reiterate. Even though I like the fact That I can easily split components into pieces and bring them back together in the form of components. I would like it. If the blocks are separated from each other and one block has no access to the code written in another block. You can wrap Each script Block in An IIFE to prevent leakage.

liulinboyi commented 2 years ago

https://github.com/vuejs/core/discussions/6842#discussioncomment-3840648

LinusBorg commented 2 years ago

All of the points you want to see changed where purposely designed this way see RFC and for obvious reasons will not change now.

You are free to start a discussion about a different approach in the rfcs repo, but dont expect it to be implemented unless your proposal introduces a major added benefit.

louiss0 commented 2 years ago

Ok then. From now on I'll have to tell developers to put the state inside of the setup block but components will stay in the original script block

LinusBorg commented 2 years ago

both can go into the setup block though.