search

vuejs / docs

📄 Documentation for Vue 3
https://vuejs.org
Other
2.82k stars 4.14k forks source link

docs: proposal for two new immutable methods for Vue's list rendering #2709

Open dev-itsheng opened 3 months ago

dev-itsheng commented 3 months ago

Description of Problem

Proposed Solution

Additional Information

JavaScript provides two new immutable methods on arrays to solve the problem of legacy functions with side effects. These two methods also apply to Vue's list rendering optimizations as well, so I've modified the documentation to add suggestions for them.

netlify[bot] commented 3 months ago

Deploy Preview for vuejs ready!

Name Link
Latest commit 1a192c726f0351c881f32e728f79c1d16fe17e4c
Latest deploy log https://app.netlify.com/sites/vuejs/deploys/663ae8fc820b7d0008dcf14d
Deploy Preview https://deploy-preview-2709--vuejs.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

brc-dd commented 3 months ago

Note that these are ES2023 features not available in over 10% browsers and require manually configuring tsconfig.

dev-itsheng commented 3 months ago

Note that these are ES2023 features not available in over 10% browsers and require manually configuring tsconfig.

I have three considerations.

  1. most users will be using the latest version of Chrome and they will get the expected results when learning the code in the documentation.

  2. if the user is using TypeScript in their project, they will have already learned to configure tsconfig, and babel will be similar.

  3. give the user the necessary hints that these two new APIs can solve the problem of array side effects, not only in this scenario in Vue, but in other scenarios as well.

AloisSeckar commented 3 months ago

Note that these are ES2023 features not available in over 10% browsers and require manually configuring tsconfig.

Although I agree that it should at least come with a comment and warning about potential issues, I am not sure you're right in the part about requiring manual configuration.

I just scaffolded fresh Vue project starter by npm create vue@latest and I can use Array.toReversed without any further config. Target is set to ESNext in default Vue's tsconfig that is being extended.

brc-dd commented 3 months ago

Target is set to ESNext in default Vue's tsconfig that is being extended

Not in tsconfig.dom.json. You probably are trying inside some ts file. It should show error in sfc.

But yeah, I agree, it's there for about a year now. We can just add a note like "if you're targeting newer browsers, you can directly use toReversed/toSorted instead"

AloisSeckar commented 3 months ago

Not in tsconfig.dom.json.

This file is extending general tsconfig.json and not changing the target setting... 🤷

brc-dd commented 3 months ago

target doesn't matter compilerOptions.lib does.

In newly created vue app:

image
AloisSeckar commented 3 months ago

You're right. I was checking whether the app can run without complaining during build time, not the actual appearance in VSCode.

AloisSeckar commented 3 months ago

@dev-itsheng

  1. if the user is using TypeScript in their project, they will have already learned to configure tsconfig, and babel will be similar.

This is a terribly wrong consideration, imo. Nowadays tools allow people using them without deeper understanding of the principles behind. I think it is generally a good thing, because it allows awesome content being created by almost everyone, but you should keep that in mind and not assuming others know what you do.

brc-dd commented 3 months ago

without complaining during build time

Yeah, the type-check command (vue-tsc) will throw error, build won't because vite doesn't check types.

dev-itsheng commented 3 weeks ago

@brc-dd @AloisSeckar

I think you are right, so I have added the new background of these two functions and solutions to common problems (editor or browser) in the main body of the document and code comments.