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

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

renderTriggered (renderTriggered)

هوک «renderTriggered در ویو (Vue)» مخصوص دیباگ است. «هوک (Hook)» یعنی زمان آماده اجرای کد. هر زمان تغییر واکنشی رندر را فعال کند، این هوک اجرا می شود. سپس صفحه تازه رندر می شود. این قابلیت فقط در حالت توسعه فعال است.

تعریف و کاربرد

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

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

در این نمونه، هر بار رندر فعال شد، جزئیات evt لاگ می شود.

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

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

گام های عملی

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

توضیح دو اصطلاح مهم

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

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

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

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

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

هشدار: این هوک در تولید غیرفعال است. روی آن تکیه نکن.

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

برای ردیابی اولیه وابستگی ها، صفحه renderTracked را ببین. همچنین برای خطاها به errorCaptured مراجعه کن. برای مرور کامل چرخه، به unmounted هم سر بزن.

جمع بندی سریع

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