Почему свойство data должно быть в функции?

Почему свойство data должно быть в функции?

Вопрос относится к Vue.js, где data — это опция компонента, которая ОБЯЗАТЕЛЬНО должна быть функцией, а не объектом. Это критично для правильной работы компонентов и избежания непредвиденного обмена состоянием между экземплярами.

Проблема: data как объект

Если определить data как простой объект:

// ❌ ПЛОХО - data как объект
const MyComponent = {
  data: {
    count: 0,
    message: 'Hello'
  },
  template: '<div>{{ count }} - {{ message }}</div>'
};

Это приводит к проблеме общего состояния:

// Создаём два экземпляра компонента
const instance1 = new MyComponent();
const instance2 = new MyComponent();

// Увеличиваем count в первом экземпляре
instance1.data.count++;

// ПРОБЛЕМА: count увеличился и во втором экземпляре!
console.log(instance1.data.count); // 1
console.log(instance2.data.count); // 1 ??? Почему?!

// Причина: оба экземпляра ссылаются на ОДИН объект
console.log(instance1.data === instance2.data); // true

Решение: data как функция

Если data — это функция, она создаёт новый объект для каждого экземпляра:

// ✅ ХОРОШО - data как функция
const MyComponent = {
  data() {
    return {
      count: 0,
      message: 'Hello'
    };
  },
  template: '<div>{{ count }} - {{ message }}</div>'
};

// Создаём два экземпляра компонента
const instance1 = new MyComponent();
const instance2 = new MyComponent();

// Увеличиваем count в первом экземпляре
instance1.data.count++;

// ПРАВИЛЬНО: count изменился только в первом экземпляре
console.log(instance1.data.count); // 1
console.log(instance2.data.count); // 0 ✓

// Причина: у каждого экземпляра свой объект состояния
console.log(instance1.data === instance2.data); // false

Объяснение с аналогией

// Аналогия 1: Плохой способ (data как объект)
// ❌ Общий ящик для всех студентов
const studentTemplate = {
  grades: {
    math: 0,
    english: 0
  }
};

const student1 = JSON.parse(JSON.stringify(studentTemplate));
const student2 = JSON.parse(JSON.stringify(studentTemplate));

// Если это общая ссылка (как в Vue с объектом):
student1.grades.math = 95;
// student2.grades.math тоже 95! Они ссылаются на одно место

// Аналогия 2: Хороший способ (data как функция)
// ✅ Каждый студент получает свой ящик
function createStudent() {
  return {
    grades: {
      math: 0,
      english: 0
    }
  };
}

const student1 = createStudent();
const student2 = createStudent();

// Теперь у каждого свой ящик
student1.grades.math = 95;
console.log(student2.grades.math); // 0 ✓

В Vue 2.x

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  // ✅ ПРАВИЛЬНО - data как функция
  data() {
    return {
      count: 0
    };
  },
  
  methods: {
    increment() {
      this.count++; // Изменяет состояние компонента
    }
  }
};
</script>

В Vue 3 (Composition API)

В Vue 3 можно использовать Composition API, где нет необходимости в data() функции:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Каждый экземпляр автоматически получает своё состояние
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

Сравнение с React

В React эта проблема решена по-другому — компоненты создают новый экземпляр каждый раз:

// React (функциональный компонент)
function MyComponent() {
  const [count, setCount] = useState(0); // Новое состояние для каждого экземпляра
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// Два экземпляра имеют разные состояния автоматически
<MyComponent />  {/* count = 0 */}
<MyComponent />  {/* count = 0 (независимое) */}

Почему это важно в List

Эта проблема особенно видна при повторении компонентов в списке:

// Vue
<template>
  <div>
    <MyCounter v-for="i in 5" :key="i" />
  </div>
</template>

// Если data — объект: все 5 компонентов делят одно состояние
// Если data — функция: каждый из 5 компонентов имеет своё состояние ✓

Сложные объекты в data

// ✅ Правильно - вложенные объекты создаются новыми
export default {
  data() {
    return {
      user: {
        name: 'John',
        address: {
          city: 'New York',
          zip: '10001'
        },
        hobbies: ['reading', 'coding'] // Новый массив для каждого экземпляра
      }
    };
  }
};

// Каждый экземпляр получает свой объект пользователя со всеми вложениями

Что происходит если забыть

// ❌ ОШИБКА - data как объект
export default {
  data: {
    items: []
  }
};

// Результат:
// Component 1: items = []
// Component 2: items = []
// Добавляем в Component 1: this.items.push('item1')
// Component 2 видит: items = ['item1'] // БУГ!

Итоги

• data должна быть функцией в Vue, чтобы каждый экземпляр компонента имел своё состояние
• Если data — объект, все экземпляры ссылаются на один объект и могут конфликтовать
• Функция создаёт новый объект для каждого экземпляра — это гарантирует изоляцию состояния
• Это фундаментальный принцип компонентной архитектуры
• В React эта проблема решена архитектурой — каждый компонент получает новые hooks
• Это частая причина багов: забыли сделать data() функцией — теперь все компоненты делят состояние