Options API: data, methods и computed
Определяйте реактивные данные, пишите методы, вызываемые из шаблона, и используйте вычисляемые свойства для производных значений, обновляемых автоматически.
«Options API: data, methods и computed» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое Options API
Options API организует логику компонента по типам параметров: data (реактивное состояние), methods (функции), computed (вычисляемое состояние), watch (побочные эффекты) и хуки жизненного цикла. Каждый из них размещается в свойстве объекта с соответствующим именем.
Опция data
Возвращает объект с реактивными свойствами. Все свойства, объявленные в data(), являются реактивными: Vue отслеживает их и повторно отображает шаблон при их изменении.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Опция methods
Функции, которые можно вызывать из шаблона или других методов. Внутри методов this ссылается на экземпляр компонента и предоставляет доступ к свойствам data и computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Опция computed
Вычисляемые свойства получают значения на основе реактивных данных. Они кэшируются и пересчитываются только при изменении зависимостей. Используйте их вместо методов для получения производных значений, чтобы избежать ненужных пересчётов.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Доступные для записи вычисляемые свойства
Для вычисляемого свойства можно определить get и set и сделать его доступным для записи — это удобно для двустороннего связывания с помощью v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Опция watch
Наблюдатели выполняют побочные эффекты при изменении реактивного свойства. Используйте их для асинхронных операций, запускаемых изменениями данных, например для получения данных при изменении поискового запроса.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Хуки жизненного цикла в Options API
Объявляйте хуки жизненного цикла как методы: created, mounted, updated, unmounted. created выполняется до готовности DOM. mounted выполняется после добавления компонента в DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Доступ к шаблону: $refs
Добавьте атрибут ref элементу шаблона и обращайтесь к элементу DOM или дочернему компоненту через this.$refs.name в методах. Доступно после монтирования.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Миксины и Composition API
В Options API есть миксины для совместного использования логики между компонентами. В Composition API миксины в основном заменены композаблами: их сложнее анализировать, и они могут вызывать конфликты имён. Для нового кода предпочтителен Composition API.
Options API и Composition API
Options API отлично подходит для небольших и средних компонентов и проще для изучения начинающими. Composition API (setup() /