Функция data() в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,data()функция является одной из основных функций, используемых для определения внутреннего состояния (данных) компонента.

data()Функция возвращает объект, а свойства в этом объекте — это внутренние данные компонента, к которым можно получить доступ и которыми можно управлять через шаблоны или другую логику.

data()Функция является важной частью каждого компонента Vue, через которую можно инициализировать состояние данных компонента.

Базовое использование функции data()

В Vue3,data()функция обычно определяется как функция и возвращает объект. Этот объект содержит свойства данных, необходимые компоненту.

Пример кода

Пример

export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  }
};

Объяснение

  • data()Функция возвращает объект, содержащий два свойства:
    • message: данные строкового типа с начальным значением'Hello, Vue3!'。
    • count: данные числового типа с начальным значением0。
  • Эти данные можно использовать непосредственно в шаблоне или методах компонента.

Почему data() является функцией?

В Vue3,data()должна быть функцией, а не напрямую возвращать объект. Это связано с тем, что компоненты Vue могут использоваться многократно. Еслиdata()является объектом, то все экземпляры будут совместно использовать один и тот же объект data, что приведёт к конфликтам данных.

С помощьюdata()определяя её как функцию, каждый раз при создании экземпляра компонента Vue вызывает эту функцию и возвращает новый объект data, тем самым гарантируя независимость данных каждого экземпляра.

Пример

Пример

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
  • Каждый раз, когда создаётся экземпляр компонента,data()вызывается функция, возвращающая совершенно новыйmessagedata.

Особенности функции data()

1. Реактивные данные

data()Свойства в возвращаемом объекте преобразуются Vue в реактивные данные. Когда эти данные изменяются, Vue автоматически обновляет представления, зависящие от них.

2. Инициализация данных

data()Функция вызывается при создании экземпляра компонента для инициализации состояния данных компонента.

3. Изоляция данных

Посколькуdata()Поскольку это функция, каждый экземпляр компонента имеет независимый объект данных, что позволяет избежать совместного использования данных и конфликтов.

Примечания к функции data()

1. Не используйте стрелочные функции

data()Функция не может быть стрелочной функцией, потому что стрелочные функции не имеют собственногоthisконтекста, что приведёт к некорректному доступу к экземпляру компонента.

Неправильный пример：

Пример

export default {
  data: () => ({
    message: 'Hello, Vue3!'
  })
};

Правильный пример：

Пример

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

2. Избегайте прямого изменения свойств экземпляра Vue

Вdata()В функции не изменяйте напрямую свойства экземпляра Vue (такие какthis.$data), а определяйте data, возвращая объект.

Практическое упражнение

Попробуйте создать компонент Vue и вdata()функции определите следующие данные:

  • username: начальное значение — пустая строка''。
  • age: начальное значение —0。
  • isStudent: начальное значение —false。

Пример

<template>
  <div>
    <h1>Информация о пользователе</h1>
    <p>Имя пользователя: {{ username }}</p>
    <p>Возраст: {{ age }}</p>
    <p>Является студентом: {{ isStudent ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
name: 'UserInfo', // имя компонента
  data() {
    return {
username: '', // начальное значение — пустая строка
age: 0, // начальное значение — 0
isStudent: false // начальное значение — false
    };
  }
});
</script>

<style scoped>
/* Необязательные стили */
h1 {
  color: #2c3e50;
}
p {
  font-size: 16px;
}
</style>

Vue3 选项式 APIVue3 Options API

Другие расширения