فهرست سرفصل‌های 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 — renderTracked (renderTracked)

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

renderTracked (renderTracked)

هوک «renderTracked در ویو (Vue)» برای دیباگ استفاده می شود. «هوک (Hook)» یعنی زمان آماده اجرای کد. این هوک وقتی رندر برای ردیابی تنظیم شود اجرا می شود. معمولاً هنگام شروع یک کامپوننت واکنشی است. مثل زمانی که ناظر کلاس حضور و غیاب را فعال می کند.

تعریف و زمان اجرا

renderTracked زمانی اجرا می شود که تابع رندر برای ردیابی یک کامپوننت واکنشی تنظیم شود. اغلب در ابتدای ساخت کامپوننت رخ می دهد. این هوک برای دیباگ است و فقط در حالت توسعه فعال است.

نمونه کد از منبع

در این مثال، رویداد renderTracked را لاگ و سپس هشدار می دهیم.

export default {
  data() {
    return {
      counter: 0
    };
  },
  renderTracked(evt) {
    console.log("renderTracked: ", evt);
    alert("renderTracked");
  }
};

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

گام های عملی

  1. حالت توسعه را فعال نگه دار. دیباگ آسان تر است.
  2. هوک renderTracked را در ریشه کامپوننت بنویس.
  3. جزئیات evt را در کنسول ثبت کن.
  4. رفتار ردیابی را بررسی کن و مشکلات را بیاب.

نکته ها و هشدارها

نکته: «کامپوننت واکنشی» یعنی بخشی که تغییر می کند و دوباره رندر می شود.

نکته: «تابع رندر» کدی است که تغییرات را پایش می کند و صفحه را به روز می کند.

هشدار: از نمایش هشدارهای زیاد خودداری کن. تجربه کاربر را خراب می کند.

پیوندهای مرتبط

برای زمان تغییر واقعی رندر، صفحه renderTriggered را ببین. همچنین برای خطاها، صفحه errorCaptured را مطالعه کن.

جمع بندی سریع

  • renderTracked مخصوص دیباگ است.
  • در ابتدای کامپوننت اجرا می شود.
  • جزئیات evt را لاگ کن.
  • فقط در حالت توسعه فعال است.
  • برای تغییرات، renderTriggered را ببین.