Vue — $forceUpdate() ($forceUpdate())

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

قبلی: $emit() ($emit()) بعدی: $nextTick() ($nextTick())

$forceUpdate() ($forceUpdate())

متد $forceUpdate() یعنی «اجبار به رندر مجدد». مثل وقتی صفحه را ریفرش می کنی. گاهی عنصر خارج از سیستم واکنشی است. بنابراین Vue خودش تغییر را نمی بیند. این جا می توانی رندر را اجبار کنی.

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

$forceUpdate() یک رندر دوباره اجرا می کند. این متد آرگومان نمی گیرد. معمولاً نیازی به آن نیست. زیرا واکنش پذیری (Reactivity) خودش رندر می کند. اما در حالت های پیشرفته، می تواند مفید باشد.

نکته: اگر می توانی، اول کد را واکنشی کن. سپس فقط وقتی مجبور شدی، از $forceUpdate() استفاده کن.

مثال: تغییر مستقیم DOM و اجبار به رندر

اینجا با $refs متن را مستقیم تغییر می دهیم. سپس با $forceUpdate() رندر را مجبور می کنیم.

<template>
  <div>
    <h3>Force Update Demo</h3>
    <p ref="pEl">Old text</p>
    <button @click="mutateAndRefresh">Mutate and Force Update</button>
  </div>
</template>

<script>
export default {
  methods: {
    mutateAndRefresh() {
      this.$refs.pEl.innerText = 'Hello!';
      this.$forceUpdate();
    }
  }
};
<\/script>

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

گام های عملی

اول راه واکنشی را بررسی کن.
اگر عنصر واکنشی نیست، تغییر را اعمال کن.
در پایان، در صورت نیاز، $forceUpdate() را صدا بزن.

هشدار: استفاده زیاد از $forceUpdate() می تواند کارایی را پایین بیاورد. بنابراین سعی کن داده ها را واکنشی تعریف کنی.

چرا و چه زمانی استفاده کنیم؟

وقتی عنصری عمداً خارج از واکنش پذیری است، رندر خودکار رخ نمی دهد. در این شرایط، $forceUpdate() رندر را تضمین می کند. اما بهتر است اول طراحی داده را بازنگری کنی.

لینک های مرتبط

برای کار با عناصر DOM از $refs کمک بگیر. همچنین زمان بندی رندر را با $nextTick() بهتر کنترل کن. اگر نیاز به چینش محتوا داری، صفحه $slots را ببین. برای اجبار به رندر مجدد در پروژه خودت، الگوی بالا کافی است.

جمع بندی سریع

$forceUpdate() رندر مجدد را اجبار می کند.
معمولاً به آن نیازی نیست.
اول داده را واکنشی طراحی کن.
در حالت های خاص از آن استفاده کن.