فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — beforeCreate (beforeCreate)

آخرین بروزرسانی: 1404/08/21

beforeCreate (beforeCreate)

هوک beforeCreate یعنی «قبل از ساخته شدن کامپوننت». اینجا هنوز داده ها و DOM آماده نیستند، پس فقط کارهای ساده انجام بده.

beforeCreate دقیقاً چه می کند؟

این اولین هوک چرخه عمر است. چون کامپوننت هنوز ساخته نشده، به data یا computed دسترسی نداریم. همچنین، عنصرهای صفحه وجود ندارند.

نمونه منبع

در این نمونه، alert و لاگ کار می کند؛ اما تغییر this.text نتیجه ندارد.

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate lifecycle hook');
    alert('beforeCreate lifecycle hook');
    this.text = 'beforeCreate lifecycle hook';
  }
};
<\/script>

مشاهده در ادیتور

چرا تغییر داده کار نمی کند؟

چون کامپوننت هنوز «ساخته» نشده است. بنابراین this آماده دسترسی به data نیست. پس هر تغییر داده اینجا نادیده گرفته می شود.

گام های پیشنهادی استفاده

  1. فقط لاگ یا تنظیمات سبک انجام بده.
  2. سراغ data در created به بعد برو.
  3. دسترسی DOM را در mounted انجام بده.

نکته: اگر نیاز به مقداردهی اولیه داده داری، از created استفاده کن.

هشدار: هرگز در beforeCreate به DOM دسترسی نگیر؛ هنوز رندر نشده است.

جمع بندی سریع

  • اولین هوک چرخه عمر است.
  • data و DOM هنوز آماده نیست.
  • برای لاگ و setup سبک مناسب است.
  • کارهای جدی را بعداً انجام بده.

پیوندهای داخلی: هوک های چرخه عمر، created.

منابع: beforeCreate (W3Schools)، فهرست Lifecycle Hooks.