From a1cbf5adc7462865816b48695957a655228d076f Mon Sep 17 00:00:00 2001 From: Denis Date: Wed, 14 Feb 2024 09:20:24 +0500 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4=20=D0=BF?= =?UTF-8?q?=D1=83=D0=BD=D0=BA=D1=82=D0=B0=20"computed-stability"=20(#346)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat Добавлен перевод пункта "computed-stability" * fix src/guide/best-practices/performance.md Co-authored-by: Bochkarev Ivan * Update src/guide/best-practices/performance.md Co-authored-by: Bochkarev Ivan * Update performance.md --------- Co-authored-by: Bochkarev Ivan --- 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 29af0a5d..79a30a8a 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 свойств {#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, computed свойство будет вызывать эффект только в том случае, если его вычисленное значение изменилось по сравнению с предыдущим. Например, computed свойство `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: +Это уменьшает количество ненужных срабатываний эффектов, но, к сожалению, не работает, если computed создает новый объект при каждом вычислении: ```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}