{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":" в Options API — это "},{"type":"text","marks":[{"type":"bold"}],"text":"функция"},{"type":"text","text":", которая возвращает объект с "},{"type":"text","marks":[{"type":"bold"}],"text":"локальным реактивным состоянием компонента"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Все свойства, которые возвращает "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":", становятся доступными в шаблоне и в "},{"type":"text","marks":[{"type":"code"}],"text":"this"},{"type":"text","text":" внутри методов, computed и watch."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","marks":[{"type":"bold"}],"text":" — место, где в Options API хранятся реактивные данные компонента."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔍 Как выглядит "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":"?"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"count"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"message"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"isOpen"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— это "},{"type":"text","marks":[{"type":"bold"}],"text":"state"},{"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":"Потому что каждый компонент должен иметь "},{"type":"text","marks":[{"type":"bold"}],"text":"свою собственную копию состояния"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если бы "},{"type":"text","marks":[{"type":"code"}],"text":"data"},{"type":"text","text":" был объектом, то все экземпляры компонента делили бы одно и то же состояние (это плохо)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Неправильно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"data: {\n count: 0\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✔️ Правильно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"data() {\n return { count: 0 }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый вызов "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":" → новая копия объекта."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔄 Как Vue делает данные реактивными"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все свойства из объекта, возвращённого "},{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","text":", Vue «оборачивает» в реактивность."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"То есть такие выражения:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"this.count++\nthis.isOpen = true\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"автоматически вызывают обновление UI."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎯 Где используются данные из data()?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"В шаблоне:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"В методах:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"methods: {\n increment() {\n this.count++\n }\n}\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"В вычисляемых свойствах (computed):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"computed: {\n upper() {\n return this.message.toUpperCase()\n }\n}\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"В watchers:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"watch: {\n count(newVal) {\n console.log('count changed:', newVal)\n }\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Пример полного компонента с Options API"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Итог (коротко)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"data()"},{"type":"text","marks":[{"type":"bold"}],"text":" — это функция, которая возвращает объект с реактивными данными компонента в Options API."}]},{"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":"любые изменения "},{"type":"text","marks":[{"type":"code"}],"text":"this.someValue"},{"type":"text","text":" вызывают обновление UI"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое data() в Options API?

Комментарии