Что такое вычисляемые свойства?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Вычисляемые свойства (computed properties) — это свойства, которые зависят от других данных и пересчитываются только при их изменении. В отличие от методов, вычисляемые свойства кэшируются.

Основные преимущества:

Кэширование: Значение вычисляемого свойства кэшируется и пересчитывается только при изменении его зависимостей. Это повышает производительность, особенно при сложных вычислениях или частом использовании свойства.
Декларативность: Код становится более читабельным и понятным, так как логика вычисления отделена от шаблона.
Повторное использование: Одно и то же вычисляемое свойство можно использовать в разных частях шаблона.

Сравнение с методами:

Характеристика	Вычисляемое свойство	Метод
Вычисление	Только при изменении зависимо	При каждом обращении
Кэширование	Есть	Нет
Синтаксис	Как свойство объекта	Как функция
Производительность	Выше при повторном обращении с теми же зависимостями	Ниже при повторном обращении

Вычисляемые свойства используются, например, во фреймворках Vue.js и React (с использованием хука useMemo).

Пример на Vue.js:

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      // Это вычисляемое свойство зависит от firstName и lastName
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

<template>
  <div>
    <p>{{ fullName }}</p> // Обращение к вычисляемому свойству
  </div>
</template>

Пример на React с useMemo:

import React, { useMemo } from 'react';

function Profile({ firstName, lastName }) {
  const fullName = useMemo(() => {
    // Это вычисляемое значение зависит от firstName и lastName
    return firstName + ' ' + lastName;
  }, [firstName, lastName]); // Массив зависимостей

  return (
    <div>
      <p>{fullName}</p>
    </div>
  );
}