Skip to content

Commit

Permalink
Добавлен перевод пункта "computed-stability" (#346)
Browse files Browse the repository at this point in the history
* feat Добавлен перевод пункта "computed-stability"

* fix src/guide/best-practices/performance.md

Co-authored-by: Bochkarev Ivan <[email protected]>

* Update src/guide/best-practices/performance.md

Co-authored-by: Bochkarev Ivan <[email protected]>

* Update performance.md

---------

Co-authored-by: Bochkarev Ivan <[email protected]>
  • Loading branch information
Sdju and Ibochkarev authored Feb 14, 2024
1 parent 0079a17 commit a1cbf5a
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions src/guide/best-practices/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,22 +123,22 @@ const Foo = defineAsyncComponent(() => import('./Foo.vue'))

`v-memo` - это встроенная директива, которая может быть использована для условного пропуска обновления больших поддеревьев или списков `v-for`. Более подробная информация приведена в [справочнике API](/api/built-in-directives#v-memo).

### Computed Stability <sup class="vt-badge" data-text="3.4+" /> {#computed-stability}
### Стабильность у computed свойств <sup class="vt-badge" data-text="3.4+" /> {#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)
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(() => {
Expand All @@ -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) => {
Expand All @@ -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}

Expand Down

0 comments on commit a1cbf5a

Please sign in to comment.