# Локальное состояние

# data

Тип: Function
Подробности:

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

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

После создания экземпляра доступ к оригинальном объекту с данными можно получить через vm.$data. Экземпляр компонента проксирует все свойства в объекте данных, поэтому обращение к vm.a будет аналогично vm.$data.a.

Свойства, чьи имена начинаются с символа _ или $, не будут проксироваться экземпляром компонента, так как могут конфликтовать с внутренними свойствами Vue и методами API. Доступ к ним можно получить через vm.$data._property.
Пример:
```
// Создание экземпляра напрямую
const data = { a: 1 }

// Объект добавляется к экземпляру компонента
const vm = createApp({
  data() {
    return data
  }
}).mount('#app')

console.log(vm.a) // => 1
```
1
2
3
4
5
6
7
8
9
10
11
Обратите внимание, если в свойстве data использовать стрелочную функцию, то this не будет указывать на экземпляр компонента. Доступ к нему в таких случаях можно получить через первый аргумент функции:
```
data: vm => ({
  a: vm.myProp
})
```
1
2
3
См. также: Подробнее о реактивности

# props

Тип: Array<string> | Object
Подробности:

Список/хэш атрибутов, которые могут принимать данные от родительского компонента. Может использоваться массив (простой синтаксис) или объект (альтернативный синтаксис). Объект позволяет указывать расширенные настройки: устанавливать проверку типа, пользовательскую валидацию или значение по умолчанию.

При использовании объектного синтаксиса доступны опции:
- type: может быть одним из нативных конструкторов: String, Number, Boolean, Array, Object, Date, Function, Symbol, или любой функцией пользовательского конструктора, или массивом из вышеперечисленных вариантов. Проверяет, что входной параметр имеет заданный тип, и выбрасывает предупреждение, если тип не соответствует заданному. Подробнее в разделе указания типа входных параметров.
- default: any Определяет значение по умолчанию для входного параметра. Если входной параметр не был передан, то будет использовано это значение. Объект или массив в значении по умолчанию необходимо возвращать из функции-фабрики.
- required: Boolean Определяет, является ли входной параметр обязательным. В окружениях кроме production будет выводиться предупреждение в консоли, если значение истинно, но входной параметр не передавался.
- validator: Function Пользовательская функция валидации, которая получает значение входного параметра единственным аргументом. В окружениях кроме production будет выводиться предупреждение в консоли, если вернётся значение, приводимое к false (т.е. когда валидация не пройдена). Подробнее в разделе валидации входных параметров.

Пример:

const app = createApp({})

// синтаксис с массивом
app.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// объектный синтаксис с валидацией
app.component('props-demo-advanced', {
  props: {
    // проверка типа
    height: Number,
    // проверка типа + другие валидации
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: value => {
        return value >= 0
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

См. также: Входные параметры

# computed

Тип: { [key: string]: Function | { get: Function, set: Function } }
Подробности:

Вычисляемые свойства, которые будут добавлены в экземпляр компонента. Все геттеры и сеттеры имеют свой контекст this, который автоматически привязывается к экземпляру компонента.

Обратите внимание, что при использовании стрелочной функции для вычисляемого свойства this не будет указывать на экземпляр компонента. Доступ к нему в таких случаях можно получить через первый аргумент функции:
```
computed: {
  aDouble: vm => vm.a * 2
}
```
1
2
3
Вычисляемые свойства кэшируются и пересчитываются только при изменении своих реактивных зависимостей. Обратите внимание, если какая-либо зависимость находится за пределами области видимости экземпляра (т.е. не является реактивной), то в таком случае вычисляемое свойство обновляться не будет.

Пример:

const app = createApp({
  data() {
    return { a: 1 }
  },
  computed: {
    // только для чтения
    aDouble() {
      return this.a * 2
    },
    // с геттером и сеттером
    aPlus: {
      get() {
        return this.a + 1
      },
      set(v) {
        this.a = v - 1
      }
    }
  }
})

const vm = app.mount('#app')

console.log(vm.aPlus) // => 2
vm.aPlus = 3
console.log(vm.a) // => 2
console.log(vm.aDouble) // => 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

См. также: Вычисляемые свойства

# methods

Тип: { [key: string]: Function }
Подробности:

Методы, которые будут добавлены в экземпляр компонента. К ним можно получить доступ через экземпляр или использовать их в выражениях директив. Все методы имеют свой контекст this, который автоматически привязывается к экземпляру компонента.

Примечание

Не используйте стрелочные функции при определении методов (например, plus: () => this.a++). Стрелочные функции связываются с родительским контекстом, поэтому this не будет указывать на экземпляр компонента и this.a окажется неопределённым.

Пример:

const app = createApp({
  data() {
    return { a: 1 }
  },
  methods: {
    plus() {
      this.a++
    }
  }
})

const vm = app.mount('#app')

vm.plus()
console.log(vm.a) // => 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

См. также: Обработка событий

# watch

Тип: { [key: string]: string | Function | Object | Array }
Подробности:

Объект, где ключами будут реактивные свойства для отслеживания — к примеру, свойства data или вычисляемые свойства — а значениями соответствующие коллбэки для вызова. Значение может быть строкой с именем метода или объектом с дополнительными опциями. Экземпляр компонента будет вызывать $watch() для каждой записи в объекте при инициализации. Подробнее о дополнительных опциях deep, immediate и flush в разделе $watch.

Пример:

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // отслеживание свойства верхнего уровня
    a(val, oldVal) {
      console.log(`новое значение: ${val}, старое: ${oldVal}`)
    },
    // строка с именем метода
    b: 'someMethod',
    // коллбэк будет вызываться каждый раз, когда изменится любое из свойств
    // наблюдаемого объекта, независимо от глубины вложенности
    c: {
      handler(val, oldVal) {
        console.log('изменилось свойство c')
      },
      deep: true
    },
    // отслеживание одного вложенного свойства объекта
    'c.d': function (val, oldVal) {
      // do something
    },
    // коллбэк будет вызван сразу после начала наблюдения
    e: {
      handler(val, oldVal) {
        console.log('изменилось свойство e')
      },
      immediate: true
    },
    // передача массива коллбэков; они будут вызываться один за другим
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('вызван handle2')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('вызван handle3')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('изменилось свойство b')
    },
    handle1() {
      console.log('вызван handle1')
    }
  }
})

const vm = app.mount('#app')

vm.a = 3 // => новое значение: 3, старое: 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

Примечание

Не используйте стрелочные функции при объявлении методов-наблюдателей (например, searchQuery: newValue => this.updateAutocomplete(newValue)). Стрелочные функции связываются с родительским контекстом, поэтому this не будет указывать на экземпляр компонента и this.updateAutocomplete окажется неопределённым.

См. также: Методы-наблюдатели

# emits

Тип: Array<string> | Object
Подробности:

Список/хэш пользовательских событий, которые могут генерироваться в компоненте. Может использоваться массив (простой синтаксис) или объект (альтернативный синтаксис). Объект позволяет определить валидацию для событий.

При использовании объектного синтаксиса значением каждого свойства может быть null или функция валидации. Функция может получить дополнительные аргументы, которые будут переданы вызову $emit. Например, для this.$emit('foo', 1) соответствующая функция валидации для foo получит аргументом значение 1. Функция должна возвращать булево значение, чтобы указать корректность передаваемых с событием аргументов.

Использование:

const app = createApp({})

// Использование массива (простой синтаксис)
app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})

// Использование объекта (альтернативный синтаксис)
app.component('reply-form', {
  emits: {
    // без валидации
    click: null,

    // с валидацией
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn('Некорректные данные для события submit!')
        return false
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Примечание

События, перечисленные в опции emits, не будут наследоваться корневым элементом компонента и будут исключены из свойства $attrs.

См. также: Наследование атрибутов

# expose 3.2+

Тип: Array<string>
Подробности:

Список свойств, которые объявлены для публичного экземпляра компонента.

По умолчанию, публичный экземпляр, который доступен через $refs, $parent или $root совпадает с внутренним экземпляром компонента, используемым шаблоном. Опция expose ограничивает список свойств, к которым можно получить доступ через публичный экземпляр.

Свойства, объявленные самим Vue, такие как $el или $parent, будут всегда доступны в публичном экземпляре, их указывать не нужно.

Использование:

export default {
  // increment будет объявлен для использования снаружи,
  // но count будет доступен только внутри
  expose: ['increment'],

  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

См. также: defineExpose

← Глобальное API DOM →