TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию?

В 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);
}
};


Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию?

В 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);
}
};


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)