{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Реактивность состояния"},{"type":"text","text":" означает, что Vue автоматически отслеживает изменения данных и "},{"type":"text","marks":[{"type":"bold"}],"text":"перерисовывает интерфейс"},{"type":"text","text":", когда эти данные меняются."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"bold"}],"text":"Если какое-то значение изменилось — Vue сам обновит всё, что от него зависит."},{"type":"hardBreak"},{"type":"text","text":"Тебе не нужно вручную обновлять DOM."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"📌 Простой пример реактивности"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты нажимаешь кнопку и "},{"type":"text","marks":[{"type":"code"}],"text":"count++"},{"type":"text","text":" увеличивает число — Vue:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"замечает изменение"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вычисляет, какие части шаблона зависят от "},{"type":"text","marks":[{"type":"code"}],"text":"count"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"перерисовывает только эту часть"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все остальные элементы остаются нетронутыми — это быстро и эффективно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Что происходит внутри?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Реактивность в Vue работает так:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ты создаёшь переменную через "},{"type":"text","marks":[{"type":"code"}],"text":"ref()"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"reactive()"},{"type":"text","text":" (или в "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue делает её «наблюдаемой» — отслеживает чтение/запись."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда значение меняется — Vue запускает механизм обновления."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент перерисовывается только там, где использовалось это значение."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue строит связи между:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"состоянием,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"шаблоном,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вычисляемыми свойствами,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"эффектами (watch, watchEffect)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти связи создаются автоматически."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"📦 Пример: реактивность объекта"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При увеличении возраста Vue обновит только текст "},{"type":"text","marks":[{"type":"code"}],"text":"25"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"26"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎯 Что делает реактивность удобной?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Не нужно вручную менять DOM"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JS меняет данные → Vue сам меняет HTML."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Шаблон всегда отражает текущее состояние"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI никогда не «расходится» с данными."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Перерисовка только там, где нужно"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue перерендерит только затронутые участки — это быстро."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Удобно строить сложные зависимости"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например, "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":" пересчитывается только при изменении зависимых данных."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Итог (коротко)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Реактивность — это способность Vue автоматически обновлять пользовательский интерфейс при изменении состояния."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"изменил "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" / "},{"type":"text","marks":[{"type":"code"}],"text":"reactive"},{"type":"text","text":" / "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":" → обновился UI"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляются только нужные участки"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"реактивность даёт простоту, предсказуемость и высокую производительность"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что означает реактивность состояния?

Комментарии