Давайте попробуем разобраться с реактивностью во VueJs

Для чего вообще создали Vue, React, Angular и какую проблему они решали? Предположим у нас такая задача:

Есть корзина на сайте Добавить в корзину можно из нескольких мест При добавлении товара в корзину высчитывалась сумма, доставка и отображалась эта информация сразу в 2-3 блоках.

Решение для такой задачи было уровня: let count = 0

function inc() { count++ let countEl = document.querySelector("#count") countEl.textContent = count let badgeEl = document.querySelector("#badge") badgeEl.textContent = count // забыл обновить третий элемент → баг }

Это было не удобно, и логичным продолжением этой истории было JQuery с их более простым селектором $: $("button").click(function(){ *** })

Но главной и фундаментальной проблемы это не решало - надо было помнить все селекторы, которые нужно обновлять и при каких условиях.

И тут на горизонте появились реактивные фреймворки, которые буквально снимали эту головную боль.

Создав переменную и изменяя ее в любом месте, все зависимые от нее элементы сайта автоматически пересчитывались и перезаписывались. Это дало возможность строить более сложные, связанные интерфейсы гораздо проще и быстрее.

let price = reactive({ count: 1700 }) price.count + 100

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

Так как это работает? Полная статья о реактивности VueJs: https://t.me/taranweb/72

Давайте попробуем разобраться с реактивностью во VueJs | Сетка — социальная сеть от hh.ru