Ответ
Свойство data в компонентах Vue должно быть функцией, чтобы каждый экземпляр компонента имел свою собственную копию данных. Если бы data был объектом, все экземпляры компонента ссылались бы на один и тот же объект, что привело бы к неожиданному поведению при изменении данных в одном компоненте.
Пример:
// Неправильно: все экземпляры будут использовать один объект
data: {
count: 0
}
// Правильно: каждый экземпляр получит свою копию данных
data() {
return {
count: 0
}
}Функция data вызывается при создании каждого нового экземпляра компонента, возвращая свежий объект данных для этого экземпляра. Это особенно важно для повторно используемых компонентов.
Ответ 18+ 🔞
Да ты посмотри, что эти Vue-разработчики вытворяют! Ну внатуре, сидишь такой, пишешь компонент, а тут — бац! — все твои данные начинают синхронно ебашить как сумасшедшие, потому что ты, мудак, забыл про одну маленькую, но охуенно важную деталь.
Слушай сюда, вот смотри. У тебя есть свойство data. Так вот, эта штука обязана быть функцией, а не простым объектом. А знаешь, нахуя? А затем, чтобы каждый новый экземпляр твоего компонента получал свою собственную, уникальную копию данных. Свою личную песочницу, блядь!
А если ты сделаешь data просто объектом, вот так:
// Неправильно, пидрила! Все экземпляры будут тыкать в один объект!
data: {
count: 0
}То получится пиздец. Все твои компоненты, как мартышлюшки дурацкие, начнут тянуть один и тот же банан! Изменяешь count в одном — он автоматом меняется во всех остальных. Удивление пиздец! А ты потом сиди и чеши репу: "И чё это у меня все кнопки синхронно нажимаются?!"
А вот правильный способ, красава:
// Правильно! Каждый экземпляр получит свой свеженький объект.
data() {
return {
count: 0
}
}Видишь? Функция! Она вызывается каждый раз, когда создаётся новый экземпляр компонента, и возвращает ему новый объект. Чистый, девственный, никому не принадлежащий. Особенно это важно для компонентов, которые ты используешь много раз на одной странице — для списков, таблиц, этих вот всех повторюшек.
Короче, запомни раз и навсегда: data — функция, возвращающая объект. Не функция — получишь ебаный клубок из никому не нужных багов. Всё, вопрос закрыт, иди работай.