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

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

beforeUpdate (beforeUpdate)

هوک beforeUpdate یعنی «قبل از بروزرسانی». وقتی سیستم واکنشی تغییر را دید، اما قبل از رندر جدید اجرا می شود. این زمان خوب است برای ثبت لاگ یا همگام سازی های سبک.

beforeUpdate چه زمانی اجرا می شود؟

بعد از تشخیص تغییر، اما قبل از رندر تازه اجرا می شود. بنابراین داده ها آماده اند؛ اما DOM هنوز آپدیت نشده است. حواست باشد روی DOM قدیمی حساب نکنی.

نمونه منبع: شمارش دفعات رندر

export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
    };
  },
  beforeUpdate() {
    this.renderCount++;
  }
};

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

نکات کاربردی و حلقه بی نهایت

نکته: برای واکنش به تغییرات، اغلب از beforeUpdate استفاده کن نه از updated. چون دستکاری داده در updated می تواند حلقه بی نهایت بسازد.

هشدار: کار سنگین در این هوک نگذار. زمان کوتاه است. برای دسترسی به DOM برو به mounted.

گام های سریع

  1. تغییر داده اتفاق می افتد.
  2. beforeUpdate اجرا می شود.
  3. کار سبک انجام بده و از DOM جدید استفاده نکن.

جمع بندی سریع

  • قبل از رندر تازه اجرا می شود.
  • برای لاگ و شمارنده ها مناسب است.
  • DOM هنوز قدیمی است.
  • برای DOM، سراغ mounted برو.

برای مرور کلی، صفحه هوک beforeUpdate ویو را هم ببین.

منابع: beforeUpdate در W3Schools، updated در W3Schools.