Опції: Стан ​

data ​

Функція, яка повертає початковий реактивний стан для екземпляра компонента.

• Тип

  ts

  interface ComponentOptions {
    data?(
      this: ComponentPublicInstance,
      vm: ComponentPublicInstance
    ): object
  }

• Подробиці

  Очікується, що функція повертатиме звичайний об’єкт JavaScript, який Vue зробить реактивним. Після створення екземпляра доступ до реактивного об'єкта даних можна отримати за допомогою this.$data. Екземпляр компонента також проксіює всі властивості, знайдені в об'єкті даних, тому this.a буде еквівалентним this.$data.a.

  Усі властивості даних верхнього рівня мають бути включені до об'єкта даних, що повертається. Додавання нових властивостей до this.$data можливо, але це не рекомендується. Якщо бажане значення властивості ще не доступне, слід включити пусте значення, наприклад undefined або null, як підмінне значення, щоб гарантувати, що Vue знає, що властивість існує.

  Властивості екземпляра компонента, які починаються з _ або $, не будуть проксі, оскільки вони можуть конфліктувати з внутрішніми властивостями Vue і методами API. Ви матимете доступ до них за допомогою this.$data._property.

  Не рекомендується повертати об'єкти з їхнім власним станом, наприклад об'єкти API браузера та властивості прототипу. Повернений об’єкт в ідеалі має бути звичайним об'єктом, який представляє лише стан компонента.

• Приклад

  js

  export default {
    data() {
      return { a: 1 }
    },
    created() {
      console.log(this.a) // 1
      console.log(this.$data) // { a: 1 }
    }
  }

  Зауважте, що якщо ви використовуєте стрілочну функцію з властивістю data, this не буде екземпляром компонента, але ви все одно можете отримати доступ до екземпляра як першого аргументу функції:

  js

  data: (vm) => ({ a: vm.myProp })

• Також до вашої уваги: Реактивність поглиблено

props ​

Оголошення реквізитів компонента.

• Тип

  ts

  interface ComponentOptions {
    props?: ArrayPropsOptions | ObjectPropsOptions
  }
  
  type ArrayPropsOptions = string[]
  
  type ObjectPropsOptions = { [key: string]: Prop }
  
  type Prop<T = any> = PropOptions<T> | PropType<T> | null
  
  interface PropOptions<T> {
    type?: PropType<T>
    required?: boolean
    default?: T | ((rawProps: object) => T)
    validator?: (value: unknown) => boolean
  }
  
  type PropType<T> = { new (): T } | { new (): T }[]

  Типи спрощено для зручності читання.

• Подробиці

  У Vue усі атрибути компонентів мають бути явно оголошені. Реквізити компонентів можуть бути оголошені у двох формах:

  • Проста форма з використанням масиву рядків
  • Повна форма з використанням об'єкта, де кожен ключ властивості є ім’ям реквізиту, а значення – типом реквізиту (функція конструктора) або розширеними параметрами.

  За допомогою об'єктного синтаксису кожен реквізит може додатково визначати наступні параметри:

  • type: Може бути одним із таких нативних конструкторів: String, Number, Boolean, Array, Object, Date, Function, Symbol, будь-яка функція користувацького конструктора або їх масив. У режимі розробки Vue перевірить, чи значення реквізиту відповідає заявленому типу, і видасть попередження, якщо воно не відповідає. Додаткову інформацію див. у розділі Перевірка реквізиту.

    Також зауважте, що реквізит із типом Boolean впливає на правила приведення значення як у розробці, так і в виробництві. Додаткову інформацію див. у розділі Логічна перевірка.

  • default: Визначає значення за промовчанням для реквізиту, якщо воно не передається батьківським компонентом або має значення undefined. Значення за промовчанням для об'єктів або масивів потрібно повертати за допомогою фабричної функції. Фабрична функція також отримує необроблений об’єкт реквізитів як аргумент.

  • required: Визначає, чи потрібен реквізит. У невиробничому середовищі буде видано попередження консолі, якщо це значення встановлене в true і реквізит не передано.

  • validator: Користувацька функція перевірки, яка приймає значення реквізиту як єдиний аргумент. У режимі розробки буде видано попередження консолі, якщо ця функція повертає хибне значення (тобто перевірка не вдається).

• Приклад

  Проста декларація:

  js

  export default {
    props: ['size', 'myMessage']
  }

  Оголошення об'єкта з перевірками:

  js

  export default {
    props: {
      // перевірка типу
      height: Number,
      // перевірка типу та інші перевірки
      age: {
        type: Number,
        default: 0,
        required: true,
        validator: (value) => {
          return value >= 0
        }
      }
    }
  }

• Також до вашої уваги:

  • Гід - Реквізити
  • Гід - Типізація властивостей компонента

computed ​

Оголошення обчислюваних властивостей, які будуть представлені в екземплярі компонента.

• Тип

  ts

  interface ComponentOptions {
    computed?: {
      [key: string]: ComputedGetter<any> | WritableComputedOptions<any>
    }
  }
  
  type ComputedGetter<T> = (
    this: ComponentPublicInstance,
    vm: ComponentPublicInstance
  ) => T
  
  type ComputedSetter<T> = (
    this: ComponentPublicInstance,
    value: T
  ) => void
  
  type WritableComputedOptions<T> = {
    get: ComputedGetter<T>
    set: ComputedSetter<T>
  }

• Подробиці

  Параметр приймає об’єкт, де ключ є назвою обчислюваних властивостей, а значенням є обчислюваний getter, або об’єкт із методами get і set (для обчислюваних властивостей доступних для запису).

  Усі getters та setters мають свій контекст this, автоматично прив'язаний до екземпляра компонента.

  Зауважте, що якщо ви використовуєте стрілочну функцію з обчислюваною властивістю, this не вказуватиме на екземпляр компонента, але ви все одно можете отримати доступ до екземпляра як першого аргументу функції:

  js

  export default {
    computed: {
      aDouble: (vm) => vm.a * 2
    }
  }

• Приклад

  js

  export default {
    data() {
      return { a: 1 }
    },
    computed: {
      // лише для читання
      aDouble() {
        return this.a * 2
      },
      // доступний для запису
      aPlus: {
        get() {
          return this.a + 1
        },
        set(v) {
          this.a = v - 1
        }
      }
    },
    created() {
      console.log(this.aDouble) // => 2
      console.log(this.aPlus) // => 2
  
      this.aPlus = 3
      console.log(this.a) // => 2
      console.log(this.aDouble) // => 4
    }
  }

• Також до вашої уваги:

  • Гід - Обчислювані властивості
  • Гід - Типізація обчислюваних властивостей

methods ​

Оголошення методів для змішування з екземпляром компонента.

• Тип

  ts

  interface ComponentOptions {
    methods?: {
      [key: string]: (this: ComponentPublicInstance, ...args: any[]) => any
    }
  }

• Подробиці

  Оголошені методи можна отримати безпосередньо в екземплярі компонента або використовувати у виразах шаблону. Усі методи мають свій this контекст, автоматично прив'язаний до екземпляра компонента, навіть якщо його передають.

  Уникайте використання стрілочних функцій під час оголошення методів, оскільки вони не матимуть доступу до екземпляра компонента через this.

• Приклад

  js

  export default {
    data() {
      return { a: 1 }
    },
    methods: {
      plus() {
        this.a++
      }
    },
    created() {
      this.plus()
      console.log(this.a) // => 2
    }
  }

• Також до вашої уваги: Обробка подій

watch ​

Оголосити функції зворотного виклику для спостереження, які будуть викликані при зміні даних.

• Тип

  ts

  interface ComponentOptions {
    watch?: {
      [key: string]: WatchOptionItem | WatchOptionItem[]
    }
  }
  
  type WatchOptionItem = string | WatchCallback | ObjectWatchOptionItem
  
  type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
  ) => void
  
  type ObjectWatchOptionItem = {
    handler: WatchCallback | string
    immediate?: boolean // за промовчанням: false
    deep?: boolean // за промовчанням: false
    flush?: 'pre' | 'post' | 'sync' // за промовчанням: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }

  Типи спрощено для зручності читання.

• Подробиці

  Параметр watch очікує об’єкт, де ключі є реактивними властивостями екземпляра компонента, за якими слід спостерігати (наприклад, властивості, оголошені через data або computed), а значення — це відповідні зворотні виклики. Зворотний виклик отримує нове значення та старе значення джерела, за якими іде спостереження.

  На додаток до властивості кореневого рівня, ключ також може бути простим шляхом, розділеним крапками, наприклад. a.b.c. Зауважте, що таке використання не підтримує складні вирази – підтримуються лише шляхи, розділені крапками. Якщо вам потрібно спостерігати за складними джерелами даних, замість цього використовуйте імперативний API $watch().

  Значенням також може бути рядок назви методу (оголошений через methods) або об’єкт, який містить додаткові параметри. При використанні об'єктного синтаксису зворотний виклик має бути оголошений у полі handler. Додаткові параметри включають:

  • immediate: активувати зворотний виклик негайно після створення спостерігача. Під час першого виклику старе значення буде undefined.
  • deep: примусовий глибокий обхід джерела, якщо це об’єкт або масив, так що зворотний виклик запускає глибокі зміни. Див. Глибинні спостерігачі.
  • flush: регулює час спрацювання зворотного виклику. Див. Час спрацювання і watchEffect().
  • onTrack / onTrigger: налагодити залежності спостерігача. Див. Налагодження спостерігача.

  Уникайте використання стрілочних функцій під час оголошення зворотних викликів спостереження, оскільки вони не матимуть доступу до екземпляра компонента через this.

• Приклад

  js

  export default {
    data() {
      return {
        a: 1,
        b: 2,
        c: {
          d: 4
        },
        e: 5,
        f: 6
      }
    },
    watch: {
      // спостереження за властивостю верхнього рівня
      a(val, oldVal) {
        console.log(`new: ${val}, old: ${oldVal}`)
      },
      // ім'я методу є рядок
      b: 'someMethod',
      // зворотний виклик буде викликаний щоразу, коли будь-яка з
      // властивостей спостережуваного об’єкта змінюється незалежно
      // від глибини їх вкладеності
      c: {
        handler(val, oldVal) {
          console.log('c changed')
        },
        deep: true
      },
      // спостереження за окремою вкладеною властивостю:
      'c.d': function (val, oldVal) {
        // робити щось
      },
      // зворотний виклик буде викликано відразу після початку спостереження
      e: {
        handler(val, oldVal) {
          console.log('e changed')
        },
        immediate: true
      },
      // ви можете передати масив зворотних викликів, вони будуть
      // викликані один за одним
      f: [
        'handle1',
        function handle2(val, oldVal) {
          console.log('handle2 triggered')
        },
        {
          handler: function handle3(val, oldVal) {
            console.log('handle3 triggered')
          }
          /* ... */
        }
      ]
    },
    methods: {
      someMethod() {
        console.log('b changed')
      },
      handle1() {
        console.log('handle 1 triggered')
      }
    },
    created() {
      this.a = 3 // => нове: 3, старе: 1
    }
  }

• Також до вашої уваги: Спостерігачі

emits ​

Оголошення користувацьких подій, які випромінюються компонентом.

• Тип

  ts

  interface ComponentOptions {
    emits?: ArrayEmitsOptions | ObjectEmitsOptions
  }
  
  type ArrayEmitsOptions = string[]
  
  type ObjectEmitsOptions = { [key: string]: EmitValidator | null }
  
  type EmitValidator = (...args: unknown[]) => boolean

• Подробиці

  Випромінювані події можуть бути оголошені у двох формах:

  • Проста форма з використанням масиву рядків
  • Повна форма з використанням об'єкта, де кожний ключ властивості є назвою події, а значенням є або null, або функція перевірки.

  Функція перевірки отримає додаткові аргументи, передані до виклику $emit компонента. Для Прикладу, якщо викликається this.$emit('foo', 1), відповідний валідатор для foo отримає аргумент 1. Функція перевірки має повертати логічне значення, щоб вказати, чи є аргументи події дійсними.

  Зауважте, що параметр emits впливає на те, які слухачі подій вважаються слухачами компонентних подій, а не рідними слухачами подій DOM. Слухачі оголошених подій буде видалено з $attrs об'єкта компонента, тому їх не буде передано до кореневого елемента компонента. Див. Прохідні атрибути для отримання додаткової інформації.

• Приклад

  Синтаксис масиву:

  js

  export default {
    emits: ['check'],
    created() {
      this.$emit('check')
    }
  }

  Синтаксис об'єкта:

  js

  export default {
    emits: {
      // немає перевірки
      click: null,
  
      // з перевіркою
      submit: (payload) => {
        if (payload.email && payload.password) {
          return true
        } else {
          console.warn(`Недійсне надсилання корисного навантаження події!`)
          return false
        }
      }
    }
  }

• Також до вашої уваги:

  • Гід - Прохідні атрибути
  • Гід - Типізація випромінювань компонента

expose ​

Оголошення відкритих загальнодоступних властивостей, коли до екземпляра компонента звертається батьківський елемент через посилання шаблону.

• Тип

  ts

  interface ComponentOptions {
    expose?: string[]
  }

• Подробиці

  За промовчанням екземпляр компонента відкриває всі властивості екземпляра для батьківського компонента, коли до нього звертаються через $parent, $root або посилання шаблону. Це може бути небажаним, оскільки компонент, швидше за все, має внутрішній стан або методи, які слід зберігати приватними, щоб уникнути тісного зв'язку.

  Параметр expose очікує список рядків імен властивостей. Коли використовується expose, лише ті властивості, які явно вказані в списку, будуть представлені у відкритому екземплярі компонента.

  expose впливає лише на визначені користувачем властивості - він не відфільтровує вбудовані властивості екземпляра компонента.

• Приклад

  js

  export default {
    // лише `publicMethod` буде доступним у публічному екземплярі
    expose: ['publicMethod'],
    methods: {
      publicMethod() {
        // ...
      },
      privateMethod() {
        // ...
      }
    }
  }