🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию?
В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}).
🟠Как работает `this` в Vue?
Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.
export default {
data() {
return { message: "Привет!" };
},
mounted() {
console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
}
};
🟠Почему стрелочная функция не работает?
Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).
export default {
data() {
return { message: "Привет!" };
},
mounted: () => {
console.log(this.message); // ❌ Ошибка: this === undefined
}
};
🟠Как стрелочные функции всё-таки можно использовать?
Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:
export default {
data() {
return { message: "Привет!" };
},
mounted() {
setTimeout(() => {
console.log(this.message); // ✅ Работает, this берётся из `mounted()`
}, 1000);
}
};
Ставь 👍 и забирай 📚 Базу знаний