حل مشكلة عدم وجود refs في DOM في Vue

في الماضي، شعرت دائمًا بأن استخدام ref للتعرف على عقدة DOM كان سهلًا جدًا عندما أعمل على مشاريع الشركة. ولكن واجهت مشكلة واحدة، وهي أن استخدام this.$refs.xxx في hook function mounted(){} كان يعود إلى undefined؟

لذلك قمت بمقارنة ملفات .vue التي استخدمت فيها ref سابقًا، ووجدت الفرق بينها.

لنفهم لماذا لا يمكن العثور على عقدة DOM معينة، يجب أن نفهم ما هو hook function mounted(){} وما هو الغرض منه.

هذا هو دورة الحياة الرسمية ل Vue (جزء منها) التي يقدمها Vue الرسمية، كما يقولون في الموقع الرسمي، لا يجب أن تفهمها في البداية، ولكن مع تقدمك في التعلم والاستخدام، سيزداد قيمتها الاستشارية.

　

أصلًا، في مرحلة mounted، تم إعداد بنية DOM، ولكن يجب توضيح هذا التحضير بشكل خاص:

تم إعداد بنية DOM، ولكن إذا تم استخدام v-if أو v-show أو v-for في أي عقدة DOM في بنية DOM هذه (الذي يعمل على تحويل DOM بناءً على البيانات المكتسبة من الخادم، أي الديناميكية)، فإن هذه العقدات لن يتم العثور عليها في مرحلة mounted.

في هذه المرحلة mounted، عادة ما يتم استخدامها لإرسال طلبات إلى الخادم للحصول على البيانات، والتعاون مع أجهزة التوجيه hooks للقيام ببعض الأشياء، ببساطة قولًا إنها تحميل البيانات فقط في مرحلة mounted، والبيانات التي يتم تحميلها لن يتم تحديثها في DOM في هذه المرحلة.

لذا إذا تم استخدام $refs في مرحلة mounted، فإن العودة إليها إذا كان ref موجهًا إلى عقدة DOM تحت v-if أو v-for أو v-show يمكن أن تكون undefined، لأنهم لا يوجدون بالفعل في مرحلة mounted!!

经过检验，上面端文字是错误的，$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

إذا كنت ترغب في الحصول على البيانات بعد إكمال تحميل DOM، تحتاج إلى استدعاء api العالمية الخاصة بVUE: this.$nextTick(() => {})

إذا كان مرحلة mounted هي مرحلة التحميل، فإن مرحلة updated هي مرحلة الانتهاء من تحديث البيانات إلى DOM (معالجة البيانات التي تم تحميلها)، في هذه المرحلة، يتم إدراج ref والبيانات وغيرها في بنية DOM، وباستخدام this.$refs.xxx في مرحلة update، يمكنك العثور على العنصر DOM بشكل 100%!

على عكس mounted، يتم استدعاء钩ة الوظيفة updated(){} في كل مرة يتم فيها تحديث بنية DOM في Vue! بينما يتم تنفيذ mounted مرة واحدة فقط.

ببساطة، فقط عندما تكون في طور الت调试، يمكنك رؤية وجود العنصر، يمكنك استخدام this.$refs.xxx للعثور على العنصر DOM الم对应 في مرحلة updated!

بشأن استخدام $refs، قدمت الوثيقة الرسمية التالية نصائح خاصة:

　

بالاستخدام، انتبهوا - -

هذا هو نهاية محتوى هذا المقال، آمل أن يكون قد ساعد في تعلمكم، وأتمنى أن تشجعوا دائمًا تعليمات الركض.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق النشر تعود لمالكها، المحتوى تم تقديمه من قبل مستخدمي الإنترنت وتم تحميله بشكل مستقل، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الأدلة، وسنقوم بإزالة المحتوى المزعوم عن انتهاك حقوق النسخ فور التحقق من ذلك.