Skip to content

Commit 1a192c7

Browse files
authored
docs: proposal for two new immutable methods for Vue's list rendering
1 parent deada93 commit 1a192c7

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/guide/essentials/list.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -426,10 +426,16 @@ methods: {
426426
</ul>
427427
```
428428

429-
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, alternatively, you can use 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):
429+
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:
430430

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

0 commit comments

Comments
 (0)