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

[dev-itsheng]

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]]

✅ 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... Use your smartphone camera to open QR code link.

---

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

[brc-dd]

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

[dev-itsheng]

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]

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]

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]

Not in tsconfig.dom.json.

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

[brc-dd]

target doesn't matter compilerOptions.lib does.

In newly created vue app:

[AloisSeckar]

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

[AloisSeckar]

@dev-itsheng

2. 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]

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]

@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.