Вот простое приложение Vue. И шаблон идет вместе с ним.

Vue каким-то образом знает, что наша «цена» обновляется, мы хотим обновить ее и во всех областях шаблона, и в коде приложения.

Но вопрос в том, откуда Vue знает, как обновляться?

Вот как обычно работает Javascript

Это не меняет "итоговую сумму", даже если "цена" изменилась позже.

Как сохранить общий расчет, чтобы снова запустить его при обновлении цены или количества?

Нам может потребоваться какое-то запоминающее устройство, на котором будет храниться наша «общая сумма». Я собираюсь найти это "общее" внутри функции. Назовем эту функцию "target". И у нас будет еще одна функция под названием «запись». Что делает функция «запись», чтобы наша «целевая» функция была сохранена в нашем хранилище. И у нас есть еще одна функция под названием «воспроизведение», которая будет запускать все сохраненные коды (в нашем случае «цель») снова, когда «количество» или «цена» были изменены.

Вот и все. Теперь наш простой код реактивности работает отлично. Этот метод был реализован с использованием наблюдаемого шаблона проектирования. Позже мы сможем подробнее изучить реактивность шаблонов Vue.