نحوه به‌روزرسانی DOM و چرخه زندگی شیء Vue

How to Update the DOM and the Life Cycle of the Vue Object

Vue.JS 2: نحوه ی به روز رسانی DOM و چرخه ی زندگی شیء Vue- قسمت 25

یکی از مهم ترین مباحث برای درک بهتر شیء Vue، آشنایی با نحوه به روز رسانی DOM توسط Vue است؛ اینکه چطور متوجه تغییرات درون DOM می شود؟ درک این مسئله آنقدر ها سخت نیست و من هم قصد ندارم وارد تک تک جزئیات آن بشوم. ما هر خصوصیتی را که در شیء Vue ایجاد می کنیم، یک watcher (به معنی «نگهبان») برای آن ایجاد می شود. این Watcher در همه حال خصوصیت ما را در نظر می گیرد و به محض تغییر، مسئله را به Vue گزارش می کند. برای ساده تر شدن موضوع می توانید به Watcher ها به عنوان event listener ها نگاه کنید.

سوال بعدی که پیش می آید این است: آیا این مسئله باعث کند شدن صفحه وب ما نمی شود؟ این سوال، سوال بسیار خوبی است. فرض کنید ما خصوصیتی به نام title داشته باشیم (آن را در Data شیء Vue تعریف کرده ایم) و مقدار آن را برابر Hello گذاشته باشیم. حالا اگر بعدا آن را از Hello به Hello تغییر بدهیم چه می شود؟ به محض اینکه به خصوصیت title دسترسی پیدا کرده و مقدار آن را تغییر بدهیم، شیء Vue متوجه آن شده و تغییر را حس می کند اما آیا می فهمد که مقدار را به همان مقدار قبلی تغییر داده ایم؟ نکته اصلی همین است: زبان جاوا اسکرپیت بسیار سریع است اما دسترسی و ایجاد تغییرات در DOM بسیار کُند و آهسته است. بسیاری از افراد تصور می کنند که Vue خصوصیات را زیر نظر گرفته و به محض ایجاد تغییر در آن ها، DOM را به روز رسانی می کند! اصلا اینطور نیست.

توسعه دهندگان Vue می دانند که سرعت دسترسی به DOM بسیار پایین است و نباید با هر تغییر کوچک آن را دستکاری کنیم. Vue برای حل این مسئله از یک DOM مجازی یا virtual DOM استفاده می کند. Virtual DOM یک لایه است که بین جاوا اسکریپت و HTML قرار می گیرد. در واقع virtual DOM همان DOM است که کپی شده و سپس به صورت جاوا اسکریپت درآمده است و از آنجایی که جاوا اسکریپت است دیگر با کاهش سرعت روبرو نیستیم. حالا Vue دست به کار شده و watcher های خود را روی virtual DOM قرار می دهد نه روی DOM اصلی! بنابراین اگر مقدار title را از Hello به Hello تغییر بدهیم چه اتفاقی می افتد؟

با هر تغییر Vue ابتدا virtual DOM را به روز رسانی می کند. بعد از به روز رسانی Virtual DOM آن را به DOM اصلی مقایسه می کند و اگر واقعا تغییری ایجاد شده بود، آن را در DOM واقعی پیاده سازی می کند. بدین صورت اگر Hello به Hello تغییر کند، در اصل تغییری رخ نداده و بنابراین DOM اصلی دست نمی خورد. در ضمن از آنجایی که virtual DOM به روز رسانی شده است، یک نسخه به روز از DOM اصلی را نیز داریم (همان Virtual DOM) که می تواند در مقایسه های بعدی استفاده شود! در تصویر زیر شکلی کلی از این مفهوم را می بینید:

Virtual DOM لایه ای بین DOM اصلی و شیء Vue محسوب می شود
Virtual DOM لایه ای بین DOM اصلی و شیء Vue محسوب می شود

چرخه زندگی شیء Vue

اولین قدم از چرخه زندگی شیء Vue با اجرا شدن دستور new Vue (همان constructor کلاس Vue) آغاز می شود. سپس اولین «متد چرخه زندگی» یا lifecycle method اجرا می شود که beforeCreate نام دارد. این تابع مسئول انجام برخی از کار ها «قبل از ساخته شدن شیء Vue» است. سپس داده ها و رویداد هایی را که تعریف کرده ایم (در همان شیء به عنوان آرگومان پاس می دهیم) initialize می شوند (یعنی آماده سازی اولیه و تنظیم و تعریف می شوند). در نهایت نمونه این کلاس که همان شیء Vue است ساخته می شود. این شیء توسط lifecycle method بعدی به نام created ساخته می شود. بنابراین تا اینجای کار یک نمونه از کلاس Vue را ساخته ایم.

در مرحله بعد Vue باید کدهای HTML ما را دریافت کند. این کدها یا به خصوصیت template پاس داده شده اند که خب از همانجا دریافت می شوند و یا اینکه از el استفاده کرده ایم. اگر از el استفاده کرده باشیم، Vue همان قسمت را از فایل HTML ما برمی دارد و مشکلی نیست. حالا lifecycle method بعدی اجرا می شود که beforeMount نام دارد. این متد دقیقا قبل از آنکه کدهای HTML ما (همان Template ما – چه از خصوصیت template گرفته شده باشد چه از el) روی DOM واقعی سوار شوند، اجرا می شود. در مرحله بعد مقدار el با قالب کامپایل شده HTML ما یکی می شود (همه را مخلوط می کند تا یک کد یکدست HTML داشته باشیم) اما هنوز هم کدهای ما روی DOM واقعی سوار نشده اند.

اگر یادتان باشد به شما گفتم که کدهای HTML ای که می نویسیم باید توسط Vue پردازش شوند و کد HTML واقعی نیستند. زمانی که می گویم «قالب کامپایل شده» یعنی همان قالب HTML ای که توسط Vue پردازش می شود. مثلا باید دستورات bind و v-if و {{ title }} و غیره را پردازش کند تا کدهای HTML ما تبدیل به کد HTML واقعی شوند. قالب کامپایل شده یعنی همین کدهای HTML واقعی و آماده شده توسط Vue. در آخرین مرحله از چرخه زندگی شیء Vue نیز قالب کامپایل شده روی DOM اصلی سوار می شود! از یک نظر می توانیم به این مرحله، مرحله آخر بگوییم اما از آنجایی که Vue تغییر داده ها را زیر نظر می گیرد، قسمت آخر چرخه هیچ وقت نمی میرد.

اگر داده ای تغییر کند یک lifecycle method دیگر به نام beforeUpdate اجرا می شود و پس از اینکه DOM به روز رسانی شد و تغییر کرد lifecycle method بعدی به نام updated اجرا می شود. در نهایت اگر شیء Vue بخواهد از بین برود، دقیقا قبل از اینکه از بین برود، متد beforeDestroyed را اجرا می کند و زمانی که نابود شد (بعد از نابودی) هم متد destroyed اجرا می شود. تصویر زیر کلیتی از این مراحل را به شما نشان می دهد:

چرخه ی زندگی یک شیء Vue از لحظه ی تولد تا مرگ
چرخه زندگی یک شیء Vue از لحظه تولد تا مرگ
تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

MEHRANGIZ
27 بهمن 1399
سلام ممنون از آموزش خوبتون عکس های آخر نیستند تو سایت فقط آلت تکستشون داره نمایش داده میشه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
27 بهمن 1399
سلام تصاویر بدون اشکال و قابل مشاهده هستند. لطفا مرورگر خود را رفرش کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر عاجلو
20 آبان 1399
سپاس از آموزش مرحله به مرحله همراه با توضیحات تکمیلی

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.