В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted
, created
, beforeDestroy
и др.) должны быть обычными функциями, а не стрелочными (() => {}
).
Когда 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);
}
};
Ставь 👍 и забирай 📚 Базу знаний