‏واکاوی سیستم واکنش‌گراییِ Vue

این بخش از مستندات رسمی Vue سراغ لایه‌های زیرین سیستم واکنش‌گرایی می‌ره. مقاله اول reactivity رو تعریف می‌کنه: یه پارادایم که بهت اجازه می‌ده به‌شکل declarative به تغییرها واکنش نشون بدی. مثال کلاسیکش صفحه‌گستره‌ی اکسله؛ وقتی سلولی که A2 بهش وابسته‌ست عوض می‌شه، A2 خودکار به‌روز می‌شه.

برای رسیدن به این رفتار سه مفهوم لازمه: effect (تابعی که یه side effect داره، مثل به‌روزرسانی چیزی)، dependency (داده‌هایی که effect می‌خونه) و subscriber (خود effect که مشترک اون داده‌هاست). چیزی که می‌خوایم یه مکانیزم جادوییه که هر وقت یه dependency عوض شد، effectهای مشترکش رو دوباره اجرا کنه.

مشکل اینه که در جاوااسکریپت خالص نمی‌شه خوندن و نوشتن متغیرهای محلی رو ردیابی کرد. چیزی که می‌شه رهگیری کرد، خوندن و نوشتن پراپرتی‌های آبجکته. مقاله می‌گه دو راه برای این کار هست: getter/setter و Proxy. ویو ۲ فقط getter/setter داشت (به‌خاطر محدودیت پشتیبانی مرورگرها)، ولی ویو ۳ برای آبجکت‌های reactive از Proxy و برای refها از getter/setter استفاده می‌کنه.

دو تابع کلیدی این وسط track و triggerن. داخل track، اگه همون لحظه یه effect فعال در حال اجرا باشه، اون effect به‌عنوان subscriber اون پراپرتی ثبت می‌شه؛ داخل trigger، وقتی پراپرتی عوض شد، همون subscriberها دوباره صدا زده می‌شن. این اشتراک‌ها توی یه ساختار سراسری WeakMap نگه داشته می‌شن.

وقتی effectی داشته باشیم که خودکار وابستگی‌هاش رو ردیابی کنه و با هر تغییر دوباره اجرا شه، بهش reactive effect می‌گیم. ویو همین رو با APIهایی مثل watchEffect در اختیارت می‌ذاره، و computed هم داخلش با همین reactive effect باطل‌سازی و محاسبه‌ی دوباره‌ش رو مدیریت می‌کنه. یه کاربرد واقعی و مهمش هم به‌روزرسانی DOMئه؛ در واقع هر کامپوننت ویو یه reactive effect می‌سازه که state و DOM رو هم‌گام نگه می‌داره.

مقاله در آخر runtime در برابر compile-time رو مقایسه می‌کنه. reactivity ویو عمدتاً runtimeئه، پس بدون build step کار می‌کنه و edge case کمتری داره، ولی محدود به سینتکس جاوااسکریپته و برای همین به «کانتینر مقدار» مثل ref نیاز داره. بعضی فریم‌ورک‌ها مثل Svelte این محدودیت رو با انجام reactivity موقع کامپایل دور می‌زنن؛ که مزیتش کد تمیزتره ولی هزینه‌ش build step و عملاً ساختن زبانیه که شبیه جاوااسکریپته ولی به چیز دیگه‌ای کامپایل می‌شه. تیم ویو این مسیر رو با Reactivity Transform امتحان کرد ولی در نهایت مناسب پروژه ندونست.

نکات کلیدی:

• reactivity یعنی واکنش declarative به تغییر داده؛ ستون‌هاش effect و dependency و subscriberن.
• ویو خوندن/نوشتن پراپرتی رو رهگیری می‌کنه: ویو ۳ برای reactive از Proxy و برای ref از getter/setter.
• track و trigger وابستگی‌ها رو در یه WeakMap ثبت و اجرا می‌کنن.
• computed، watchEffect و رندر خودِ کامپوننت همه روی همین reactive effect ساخته شدن.