Зависимости в вычисляемых свойствах

В Petite-Vue, как и в других реактивных фреймворках, вычисляемые свойства представляют собой функции, результат которых автоматически пересчитывается при изменении зависимых данных. Правильное понимание механизма зависимостей позволяет создавать эффективные и предсказуемые реактивные приложения.

Основы вычисляемых свойств

В Petite-Vue вычисляемое свойство определяется как функция, возвращающая значение на основе реактивных данных:

const app = PetiteVue.createApp({
    count: 0,
    doubleCount() {
        return this.count * 2;
    }
}).mount('#app');

В этом примере doubleCount зависит от свойства count. Когда count изменяется, Petite-Vue автоматически пересчитывает doubleCount.

Ключевой момент: Petite-Vue отслеживает доступ к реактивным свойствам во время выполнения функции вычисляемого свойства. Любое свойство, которое читается внутри функции, становится зависимостью.

Автоматическое отслеживание зависимостей

Механизм реактивности Petite-Vue основан на наблюдении доступа к свойствам. При вызове вычисляемого свойства:

  1. Petite-Vue помечает текущее вычисление как «активное».
  2. Все реактивные свойства, к которым происходит обращение, регистрируют активное вычисление как зависимость.
  3. При изменении этих свойств вычисление автоматически пересчитывается.

Пример:

const app = PetiteVue.createApp({
    a: 1,
    b: 2,
    sum() {
        return this.a + this.b;
    }
}).mount('#app');

app.a = 5; // sum пересчитается автоматически

Здесь sum зависит от a и b. Любое изменение этих свойств инициирует пересчёт sum.

Ленивая и кэшированная реактивность

В Petite-Vue вычисляемые свойства ленивы по умолчанию, что означает:

  • Значение не вычисляется до первого обращения.
  • После вычисления результат кэшируется до изменения зависимостей.
const app = PetiteVue.createApp({
    x: 10,
    squared() {
        console.log('Вычисление squared');
        return this.x * this.x;
    }
}).mount('#app');

console.log(app.squared); // 'Вычисление squared' выводится один раз
console.log(app.squared); // используется кэшированное значение
app.x = 5;
console.log(app.squared); // пересчёт, потому что зависимость x изменилась

Кэширование предотвращает лишние вычисления и делает работу с реактивными вычислениями эффективной.

Композиция зависимостей

Вычисляемые свойства могут зависеть друг от друга, создавая цепочки реактивности:

const app = PetiteVue.createApp({
    base: 2,
    factor: 3,
    multiplied() {
        return this.base * this.factor;
    },
    squared() {
        return this.multiplied * this.multiplied;
    }
}).mount('#app');

app.base = 4;
// пересчёт multiplied и затем squared автоматически

Важно помнить, что Petite-Vue автоматически отслеживает цепочки зависимостей и обновляет каждое вычисляемое свойство в правильном порядке.

Особенности и ограничения

  • Нет необходимости вручную указывать зависимости. Все доступы к реактивным свойствам внутри функции фиксируются автоматически.
  • Изменение обычных объектов и массивов. Petite-Vue отслеживает изменения свойств объектов и операций с массивами (push, pop, splice) для корректного обновления вычисляемых значений.
  • Циклические зависимости. Если вычисляемое свойство зависит от самого себя напрямую или через цепочку, результат будет неопределённым. Необходимо избегать таких сценариев.
  • Сложные операции. В случае дорогих вычислений можно использовать технику мемоизации внутри вычисляемого свойства, но нужно учитывать реактивность зависимостей.

Практическое использование

  • Форматирование данных перед выводом. Например, объединение строк или вычисление процентов.
  • Агрегация числовых данных, сумм и средних значений.
  • Фильтрация и сортировка массивов на основе текущего состояния.

Пример с фильтрацией:

const app = PetiteVue.createApp({
    items: ['apple', 'banana', 'cherry'],
    query: '',
    filteredItems() {
        return this.items.filter(item => item.includes(this.query));
    }
}).mount('#app');

app.query = 'a'; // filteredItems автоматически обновляется

Заключение по зависимостям

Правильное использование зависимостей в вычисляемых свойствах позволяет создавать эффективные, предсказуемые и производительные интерфейсы. Основные принципы — автоматическое отслеживание доступа, ленивость вычислений, кэширование результата и безопасная композиция цепочек зависимостей.

Эти механизмы формируют основу реактивного программирования в Petite-Vue и делают вычисляемые свойства мощным инструментом для построения динамических приложений.

Оглавление