Vue.js

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

# 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}

  • Подробности:

    Объект, ключ в котором определяет выражения для отслеживания изменений, а значение соответствующий коллбэк для вызова. Значение также может быть строкой с именем метода или объектом, содержащим дополнительные опции. Экземпляр компонента будет вызывать $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.

Deployed on Netlify.
Последнее обновление: 2021-03-17, 19:08:02 UTC

← DOM →