From 5d267428c5b2be1c0a929830f3934d4bb0f6b76c Mon Sep 17 00:00:00 2001 From: zede Date: Mon, 12 Feb 2024 22:05:56 +0500 Subject: [PATCH 1/4] =?UTF-8?q?feat=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=B0=20"computed-stability"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/best-practices/performance.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 87c6ab4a..45b07952 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -123,9 +123,9 @@ const Foo = defineAsyncComponent(() => import('./Foo.vue')) `v-memo` - это встроенная директива, которая может быть использована для условного пропуска обновления больших поддеревьев или списков `v-for`. Более подробная информация приведена в [справочнике API](/api/built-in-directives#v-memo). -### Computed Stability {#computed-stability} +### Стабильность у вычисляемых свойств {#computed-stability} -Starting in 3.4, a computed property will only trigger effects when its computed value has changed from the previous one. For example, the following `isEven` computed only triggers effects if the returned value has changed from `true` to `false`, or vice-versa: +Начиная с 3.4, вычисляемое свойство будет вызывать эффект только в том случае, если его вычисленное значение изменилось по сравнению с предыдущим. Например, вычисляемое свойство `isEven` вызывает эффект, только если возвращаемое значение изменилось с `true` на `false`, или наоборот: ```js const count = ref(0) @@ -133,12 +133,12 @@ const isEven = computed(() => count.value % 2 === 0) watchEffect(() => console.log(isEven.value)) // true -// will not trigger new logs because the computed value stays `true` +// Это не будет запускать вывод логов, так как вычисленное значение остается `true` count.value = 2 count.value = 4 ``` -This reduces unnecessary effect triggers, but unfortunately doesn't work if the computed creates a new object on each compute: +Это уменьшает количество ненужных срабатываний эффектов, но, к сожалению, не работает, если вычисляемый создает новый объект при каждом вычислении: ```js const computedObj = computed(() => { @@ -148,9 +148,9 @@ const computedObj = computed(() => { }) ``` -Because a new object is created each time, the new value is technically always different from the old value. Even if the `isEven` property remains the same, Vue won't be able to know unless it performs a deep comparison of the old value and the new value. Such comparison could be expensive and likely not worth it. +Поскольку каждый раз создается новый объект, новое значение технически всегда отличается от старого. Даже если свойство `isEven` остается неизменным, Vue не сможет узнать об этом, пока не выполнит глубокое сравнение старого и нового значения. Такое сравнение может быть дорогостоящим и, скорее всего, не стоит того. -Instead, we can optimize this by manually comparing the new value with the old value, and conditionally returning the old value if we know nothing has changed: +Вместо этого мы можем оптимизировать этот процесс, вручную сравнивая новое значение со старым и при необходимости возвращая старое значение, если мы знаем, что ничего не изменилось: ```js const computedObj = computed((oldValue) => { @@ -164,9 +164,9 @@ const computedObj = computed((oldValue) => { }) ``` -[Playground Example](https://play.vuejs.org/#eNqVVMtu2zAQ/JUFgSZK4UpuczMkow/40AJ9IC3aQ9mDIlG2EokUyKVt1PC/d0lKtoEminMQQC1nZ4c7S+7Yu66L11awGUtNoesOwQi03ZzLuu2URtiBFtUECtV2FkU5gU2OxWpRVaJA2EOlVQuXxHDJJZeFkgYJayVC5hKj6dUxLnzSjZXmV40rZfFrh3Vb/82xVrLH//5DCQNNKPkweNiNVFP+zBsrIJvDjksgGrRahjVAbRZrIWdBVLz2yBfwBrIsg6mD7LncPyryfIVnywupUmz68HOEEqqCI+XFBQzrOKR79MDdx66GCn1jhpQDZx8f0oZ+nBgdRVcH/aMuBt1xZ80qGvGvh/X6nlXwnGpPl6qsLLxTtitzFFTNl0oSN/79AKOCHHQuS5pw4XorbXsr9ImHZN7nHFdx1SilI78MeOJ7Ca+nbvgd+GgomQOv6CNjSQqXaRJuHd03+kHRdg3JoT+A3a7XsfcmpbcWkQS/LZq6uM84C8o5m4fFuOg0CemeOXXX2w2E6ylsgj2gTgeYio/f1l5UEqj+Z3yC7lGuNDlpApswNNTrql7Gd0ZJeqW8TZw5t+tGaMdDXnA2G4acs7xp1OaTj6G2YjLEi5Uo7h+I35mti3H2TQsj9Jp6etjDXC8Fhu3F9y9iS+vDZqtK2xB6ZPNGGNVYpzHA3ltZkuwTnFf70b+1tVz+MIstCmmGQzmh/p56PGf00H4YOfpR7nV8PTxubP8P2GAP9Q==) +[Пример в песочнице](https://play.vuejs.org/#eNqVVMtu2zAQ/JUFgSZK4UpuczMkow/40AJ9IC3aQ9mDIlG2EokUyKVt1PC/d0lKtoEminMQQC1nZ4c7S+7Yu66L11awGUtNoesOwQi03ZzLuu2URtiBFtUECtV2FkU5gU2OxWpRVaJA2EOlVQuXxHDJJZeFkgYJayVC5hKj6dUxLnzSjZXmV40rZfFrh3Vb/82xVrLH//5DCQNNKPkweNiNVFP+zBsrIJvDjksgGrRahjVAbRZrIWdBVLz2yBfwBrIsg6mD7LncPyryfIVnywupUmz68HOEEqqCI+XFBQzrOKR79MDdx66GCn1jhpQDZx8f0oZ+nBgdRVcH/aMuBt1xZ80qGvGvh/X6nlXwnGpPl6qsLLxTtitzFFTNl0oSN/79AKOCHHQuS5pw4XorbXsr9ImHZN7nHFdx1SilI78MeOJ7Ca+nbvgd+GgomQOv6CNjSQqXaRJuHd03+kHRdg3JoT+A3a7XsfcmpbcWkQS/LZq6uM84C8o5m4fFuOg0CemeOXXX2w2E6ylsgj2gTgeYio/f1l5UEqj+Z3yC7lGuNDlpApswNNTrql7Gd0ZJeqW8TZw5t+tGaMdDXnA2G4acs7xp1OaTj6G2YjLEi5Uo7h+I35mti3H2TQsj9Jp6etjDXC8Fhu3F9y9iS+vDZqtK2xB6ZPNGGNVYpzHA3ltZkuwTnFf70b+1tVz+MIstCmmGQzmh/p56PGf00H4YOfpR7nV8PTxubP8P2GAP9Q==) -Note that you should always perform the full computation before comparing and returning the old value, so that the same dependencies can be collected on every run. +Обратите внимание, что перед сравнением и возвратом старого значения вы всегда должны выполнить вычисление полностью, чтобы при каждом запуске можно было собрать одни и те же зависимости. ## Общие оптимизации {#general-optimizations} From f2a0d71c3d0353a5e461a4e9900059fe6339ddbc Mon Sep 17 00:00:00 2001 From: Denis Date: Tue, 13 Feb 2024 14:54:27 +0700 Subject: [PATCH 2/4] fix src/guide/best-practices/performance.md Co-authored-by: Bochkarev Ivan --- src/guide/best-practices/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 45b07952..6b695658 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -123,7 +123,7 @@ const Foo = defineAsyncComponent(() => import('./Foo.vue')) `v-memo` - это встроенная директива, которая может быть использована для условного пропуска обновления больших поддеревьев или списков `v-for`. Более подробная информация приведена в [справочнике API](/api/built-in-directives#v-memo). -### Стабильность у вычисляемых свойств {#computed-stability} +### Стабильность у computed свойств {#computed-stability} Начиная с 3.4, вычисляемое свойство будет вызывать эффект только в том случае, если его вычисленное значение изменилось по сравнению с предыдущим. Например, вычисляемое свойство `isEven` вызывает эффект, только если возвращаемое значение изменилось с `true` на `false`, или наоборот: From 5de5a3dc4b62727a6593a431ff10bddf0be6994e Mon Sep 17 00:00:00 2001 From: Denis Date: Tue, 13 Feb 2024 14:54:36 +0700 Subject: [PATCH 3/4] Update src/guide/best-practices/performance.md Co-authored-by: Bochkarev Ivan --- src/guide/best-practices/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 6b695658..44b71503 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -125,7 +125,7 @@ const Foo = defineAsyncComponent(() => import('./Foo.vue')) ### Стабильность у computed свойств {#computed-stability} -Начиная с 3.4, вычисляемое свойство будет вызывать эффект только в том случае, если его вычисленное значение изменилось по сравнению с предыдущим. Например, вычисляемое свойство `isEven` вызывает эффект, только если возвращаемое значение изменилось с `true` на `false`, или наоборот: +Начиная с 3.4, computed свойство будет вызывать эффект только в том случае, если его вычисленное значение изменилось по сравнению с предыдущим. Например, computed свойство `isEven` вызывает эффект, только если возвращаемое значение изменилось с `true` на `false`, или наоборот: ```js const count = ref(0) From 463429520df0997b2065e30c6bf4a3ab41dd4797 Mon Sep 17 00:00:00 2001 From: Bochkarev Ivan Date: Wed, 14 Feb 2024 10:20:06 +0600 Subject: [PATCH 4/4] Update performance.md --- src/guide/best-practices/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 44b71503..9cca90e3 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -138,7 +138,7 @@ count.value = 2 count.value = 4 ``` -Это уменьшает количество ненужных срабатываний эффектов, но, к сожалению, не работает, если вычисляемый создает новый объект при каждом вычислении: +Это уменьшает количество ненужных срабатываний эффектов, но, к сожалению, не работает, если computed создает новый объект при каждом вычислении: ```js const computedObj = computed(() => {