From deada93529cefe54f27c0dc38d5c581aa63a3f0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A3=E9=87=8C=E5=A5=BD=E8=84=8F=E4=B8=8D=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5?= Date: Fri, 23 Feb 2024 14:51:25 +0800 Subject: [PATCH 1/2] docs: proposal for two new immutable methods for Vue's list rendering --- src/guide/essentials/list.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index 94800b697d..dd6ca10fd7 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -426,9 +426,10 @@ 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: +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): ```diff - return numbers.reverse() + return [...numbers].reverse() ++ return numbers.toReversed() ``` From 1a192c726f0351c881f32e728f79c1d16fe17e4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A3=E9=87=8C=E5=A5=BD=E8=84=8F=E4=B8=8D=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5?= Date: Wed, 8 May 2024 10:52:40 +0800 Subject: [PATCH 2/2] docs: proposal for two new immutable methods for Vue's list rendering --- src/guide/essentials/list.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index dd6ca10fd7..8e54684704 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -426,10 +426,16 @@ 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, 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): +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() ```