Будет ли работать return new data в computed

Question

Будет ли работать return new data в computed

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

Нет, return new data в computed не будет работать корректно. Computed свойства должны возвращать вычисленное значение на основе реактивных зависимостей, а не создавать новые данные при каждом обращении.

Пример неправильного использования:

computed: {
  invalidComputed() {
    return { new: 'data' } // Так делать не стоит!
  }
}

Проблемы:

Каждый вызов создаёт новый объект, что может вызвать ненужные ререндеры
Нарушается принцип мемоизации computed свойств
Может привести к проблемам с реактивностью

Вместо этого лучше использовать data или метод, если нужно каждый раз создавать новый объект.

Ответ 18+ 🔞

А, слушай, вот это вообще классика, блядь! Люди как с цепи срываются с этим return new data в computed свойствах. Ну прям как Герасим с Муму — либо так, либо нихуя!

Смотри, в чём прикол, ёпта. Computed свойства — они же не просто функции, которые что-то там выплёвывают. Это, блядь, умные хулиганы! Они сидят, смотрят на твои реактивные зависимости (это вот data, props, другие computed), и если нихуя не поменялось — они тебе старое, закэшированное значение из кармана достают. Мемоизация, блядь, называется! А ты тут со своим return { new: 'data' } каждый раз новый объект лепишь, как дурак.

Представь, блядь:

computed: {
  invalidComputed() {
    return { new: 'data' } // Ёб твою мать, опять новенький!
  }
}

Проблемы, которые ты на свою жопу навлекаешь:

Ненужные ререндеры, овердохуища! Vue смотрит: "О, объект новый! Значит, значение поменялось! Ёбана-рот, рендерим всё заново!" А по факту-то нихуя не поменялось, просто ты каждый раз новую коробку из-под телевизора приносишь, а внутри та же самая хуйня.
Принцип мемоизации в пизду. Весь смысл computed — экономить ресурсы. А ты их нихуя не экономишь, ты их, сука, транжиришь, как последний распиздяй! Каждый вызов — новая операция. Зачем тогда computed, если можно обычный метод вызвать?
Реактивность может накрыться медным тазом. С новым объектом могут быть, блядь, нежданчики. Где-то что-то не отследится, где-то зависнет. В общем, пиздец, а не архитектура.

Так что же делать, ёбаный в рот?

Нужно каждый раз новое? Используй method, честно и прямо. getFreshData() { return { new: 'data' } }. Все довольны, Vue в курсе, что тут каждый раз новенькое.
Нужно производное значение от существующих данных? Вот тогда твой выход — computed. Но возвращай примитив (string, number, boolean) или ссылку на существующий реактивный объект/массив, а не создавай хуйню на ровном месте.
Хочешь сложный объект на основе данных? Создай его в data или используй композицию других computed свойств, блядь. Или тот же метод, если логика тяжёлая.

Короче, запомни как "Отче наш": computed — для производных, memoized значений. Methods — для действий и свежего говна. Не путай, а то получишь неоптимальное говно приложения, которое всех заебёт.