Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/guide/essentials/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -426,9 +426,16 @@ methods: {
</ul>
```

Be careful with `reverse()` and `sort()` in a computed property! These two methods will mutate the original array, which should be avoided in computed getters. Create a copy of the original array before calling these methods:
Be careful with `reverse()` and `sort()` in a computed property! These two methods will mutate the original array, which should be avoided in computed getters. Create a copy of the original array before calling these methods. Fortunately, ES2023 adds two new their corresponding immutable methods, [`toReversed()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed) and [`toSorted()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted). If your browser or build tool supports them, you can also try using them:

```diff
- return numbers.reverse()
+ return [...numbers].reverse()

// - If the console error "Uncaught TypeError: numbers.a is not a function" is reported in the browser,
// you need to use Chrome / Edge 110, Firefox 115, Safari 16 or higher.
//
// - If the TypeScript error "Property 'toReversed' does not exist on type 'number[]'" is reported in the editor,
// you need to adjust the "target" in tsconfig.json in the root directory of the project to "ESNext".
+ return numbers.toReversed()
```