الخيارات: دورة الحياة ​

beforeCreate ​

يستدعى عندما تُهيأ نسخة المكون.

• النوع

  ts

  interface ComponentOptions {
    beforeCreate?(this: ComponentPublicInstance): void
  }

• التفاصيل

  يستدعى على الفور عندما تُهيأ النسخة، بعد حل الخاصيات، قبل معالجة خيارات أخرى مثل ()data أو computed.

  لاحظ أن خطاف ()setup من الواجهة التركيبية يستدعى قبل أي خطافات واجهة الخيارات، حتى beforeCreate().

created ​

يستدعى بعد أن تنتهي النسخة من معالجة جميع خيارات الحالة ذات الصلة.

• النوع

  ts

  interface ComponentOptions {
    created?(this: ComponentPublicInstance): void
  }

• التفاصيل

  عندما يستدعى هذا الخطاف، يُهيأ ما يلي: البيانات التفاعلية، الخاصيات المحسوبة، التوابع، والدوال المراقبة. ومع ذلك، لم تبدأ مرحلة الوصل، ولن تكون خاصية $el متاحة بعد.

beforeMount ​

يستدعى مباشرة قبل أن يوصل المكون.

• النوع

  ts

  interface ComponentOptions {
    beforeMount?(this: ComponentPublicInstance): void
  }

• التفاصيل

  عندما يستدعى هذا الخطاف، ينتهي المكون من إعداد حالته التفاعلية، ولكن لم ينشأ أي عقد DOM بعد. هو على وشك تنفيذ تأثير تصيير DOM لأول مرة.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

mounted ​

يستدعى بعد أن يوصل المكون.

• النوع

  ts

  interface ComponentOptions {
    mounted?(this: ComponentPublicInstance): void
  }

• التفاصيل

  يعتبر المكون موصولا بعد:

  • كل مكوناته الأبناء المتزامنة قد وُصلت (لا يشمل المكونات الأبناء الغير متزامنة أو المكونات داخل أشجار <Suspense>).

  • أنشئت شجرة الـDOM الخاصة به وإدراجها في حاوية الأب. تجدر الملاحظة أنه يضمن فقط أن شجرة DOM للمكون في المستند إذا كانت حاوية جذر التطبيق أيضًا في المستند.

  هذا الخطاف يستخدم عادة لأداء الآثار الجانبية التي تحتاج إلى الوصول إلى DOM المكون المصير، أو لتقييد الكود المتعلق بـDOM للعميل في تطبيق مصير على الخادم.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

beforeUpdate ​

يستدعى مباشرة قبل أن يقوم المكون بتحديث شجرة DOM بسبب تغيير حالة تفاعلية.

• النوع

  ts

  interface ComponentOptions {
    beforeUpdate?(this: ComponentPublicInstance): void
  }

• التفاصيل

  يمكن استخدام هذا الخطاف للوصول إلى حالة DOM قبل أن يقوم Vue بتحديث DOM. كما أنه آمن لتعديل حالة المكون داخل هذا الخطاف.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

updated ​

تسجل دالة رد نداء لتكون مستدعاة بعد أن يحدث المكون تحديثا لشجرة DOM بسبب تغيير حالة تفاعلية.

• النوع

  ts

  interface ComponentOptions {
    updated?(this: ComponentPublicInstance): void
  }

• التفاصيل

  يستدعى خطاف التحديث للمكون الأب بعد ذلك من مكوناته الأبناء.

  يستدعى هذا الخطاف بعد أي تحديث DOM للمكون، والذي يمكن أن يسببه تغييرات حالة مختلفة، لأنه يمكن دمج تغييرات حالة متعددة في دورة تصيير واحدة لأسباب أداء. إذا كنت بحاجة إلى الوصول إلى DOM المحدث بعد تغيير حالة محدد، استخدم nextTick() بدلا من ذلك..

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

  تنبيه

  لا تغير حالة المكون في خطاف التحديث - هذا سيؤدي على الأرجح إلى حلقة تحديث لا نهائية!

beforeUnmount ​

يستدعى مباشرة قبل أن تفصل نسخة المكون.

• النوع

  ts

  interface ComponentOptions {
    beforeUnmount?(this: ComponentPublicInstance): void
  }

• التفاصيل

  عندما يستدعى هذا الخطاف، النسخة المكون لا تزال مفعلة بالكامل.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

unmounted ​

يستدعى بعد أن تفصل نسخة المكون.

• النوع

  ts

  interface ComponentOptions {
    unmounted?(this: ComponentPublicInstance): void
  }

• التفاصيل

  يعتبر المكون مفصولا بعد:

  • كل مكوناته الأبناء قد فصلت.

  • أوقفت جميع التأثيرات التفاعلية المرتبطة به (تأثير التصيير والخاصيات المحسوبة / الخاصيات المراقبة التي أنشئت أثناء ()setup).

  استخدم هذا الخطاف لتنظيف الآثار الجانبية التي تم أنشئت يدويًا مثل المؤقتات، مستمعات أحداث DOM أو اتصالات الخادم.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

errorCaptured ​

يستدعى عندما يُلتقط خطأ ينتقل من مكون إبن.

• النوع

  ts

  interface ComponentOptions {
    errorCaptured?(
      this: ComponentPublicInstance,
      err: unknown,
      instance: ComponentPublicInstance | null,
      info: string
    ): boolean | void
  }

• التفاصيل

  يمكن أن تُلتقط الأخطاء من المصادر التالية:

  • تصيير المكون
  • معالجات الأحداث
  • خطافات دورة الحياة
  • دالة ()setup
  • الدوال المراقبة
  • خطافات السمات الموجهة المخصصة
  • خطافات الانتقال

  يستقبل الخطاف ثلاثة وسيطات: الخطأ، نسخة المكون التي أحدثت الخطأ، وسلسلة معلومات تحدد نوع مصدر الخطأ.

يمكنك تعديل حالة المكون في ()errorCaptured لعرض حالة الخطأ للمستخدم. ومع ذلك، من المهم أن حالة الخطأ لا يجب أن تصيّر المحتوى الأصلي الذي تسبب في الخطأ؛ وإلا سيُلقى المكون في حلقة تصيير لا نهائية.

يمكن للخطاف أن يرجع false لمنع الخطأ من الانتشار أكثر. انظر إلى تفاصيل انتشار الخطأ أدناه.

قواعد انتشار الخطأ

• بشكل افتراضي، ترسل جميع الأخطاء إلى مستوى جذر التطبيق app.config.errorHandler إذا عرف، بحيث يمكن الإبلاغ عن هذه الأخطاء لخدمة تحليلية في مكان واحد.

• إذا كانت هناك عدة خطافات errorCaptured على سلسلة الوراثة أو سلسلة الأب للمكون، سيستدعى كل منها على نفس الخطأ، بالترتيب من الأسفل إلى الأعلى. هذا مشابه لآلية الفقاعة في أحداث DOM الأصلية.

• إذا ألقى الخطاف ()errorCaptured نفسه خطأ، يرسل هذا الخطأ والخطأ الملتقط الأصلي إلى app.config.errorHandler.

• يمكن لخطاف ()errorCaptured أن يرجع false لمنع الخطأ من الانتشار أكثر. هذا يعني بشكل أساسي "تم التعامل مع هذا الخطأ ويجب تجاهله." سيمنع أي خطافات ()errorCaptured إضافية أو app.config.errorHandler من الاستدعاء لهذا الخطأ.

renderTracked ​

يستدعى عندما يتم تتبع اعتمادية تفاعلية بواسطة تأثير تصيير المكون.

هذا الخطاف للوضع التطويري فقط ولا يستدعى أثناء التصيير من طرف الخادم.

• النوع

  ts

  interface ComponentOptions {
    renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
  }
  
  type DebuggerEvent = {
    effect: ReactiveEffect
    target: object
    type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
    key: any
  }

• اطلع أيضًا على التفاعلية بالتفصيل

renderTriggered ​

يستدعى عندما يشغل اعتمادية تفاعلية تأثير تصيير المكون لإعادة التشغيل.

هذا الخطاف للوضع التطويري فقط ولا يستدعى أثناء التصيير من طرف الخادم.

• النوع

  ts

  interface ComponentOptions {
    renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
  }
  
  type DebuggerEvent = {
    effect: ReactiveEffect
    target: object
    type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
    key: any
    newValue?: any
    oldValue?: any
    oldTarget?: Map<any, any> | Set<any>
  }

• اطلع أيضًا على التفاعلية بالتفصيل

activated ​

يستدعى بعد أن تُدرج نسخة المكون في DOM كجزء من شجرة مخزنة بواسطة <KeepAlive>.

هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

• النوع

  ts

  interface ComponentOptions {
    activated?(this: ComponentPublicInstance): void
  }

• اطلع أيضًا على دليل - دورة حياة النسخة المخزنة

deactivated ​

يستدعى بعد أن تُزال نسخة المكون من DOM كجزء من شجرة مخزنة بواسطة <KeepAlive>.

هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم.

• النوع

  ts

  interface ComponentOptions {
    deactivated?(this: ComponentPublicInstance): void
  }

• اطلع أيضًا على دليل - دورة حياة النسخة المخزنة

serverPrefetch ​

دالة غير متزامنة لتكون تحل قبل أن تُصيّر نسخة المكون على الخادم.

• النوع

  ts

  interface ComponentOptions {
    serverPrefetch?(this: ComponentPublicInstance): Promise<any>
  }

• التفاصيل

  إذا أرجعت الدالة رد نداء من النوع Promise، سينتظر مصيّر الخادم حتى يُحل الوعد قبل تصيير المكون.

  هذا الخطاف لا يستدعى أثناء التصيير من طرف الخادم ويمكن استخدامه لأداء جلب البيانات فقط من الخادم.

• مثال

  js

  export default {
    data() {
      return {
        data: null
      }
    },
    async serverPrefetch() {
      // يصير المكون كجزء من الطلب الأولي
      // جلب البيانات مسبقا على الخادم لأنه أسرع من العميل
      this.data = await fetchOnServer(/* ... */)
    },
    async mounted() {
      if (!this.data) {
      // إذا كانت البيانات مساوية لـ null عند التوصيل، فهذا يعني أن المكون
      // يصيّر بشكل ديناميكي على العميل.
      // قم بجلب البيانات من العميل بدلا من ذلك.
        this.data = await fetchOnClient(/* ... */)
      }
    }
  }

• اطلع أيضا على التصيير من طرف الخادم