‏بدترین Vue دنیا رو بسازیم!

نویسنده که قبل‌تر یه کلون کوچیک از React نوشته بود، این‌بار سراغ Vue رفته و یه نانو-فریم‌ورک آموزشی به اسم Q ساخته. به گفتهٔ نویسنده، Vue برخلاف React موقع رندر وابستگی‌ها رو ردگیری می‌کنه و بدون هیچ diffing‌ای فقط همون بخش‌هایی از DOM رو به‌روز می‌کنه که واقعاً به دادهٔ تغییرکرده وصلن. همین یه نکته، کل طراحی رو شکل می‌ده.

کلید این واکنش‌پذیری، متد Object.defineProperty هست: با تعریف getter و setter سفارشی روی یه فیلد، می‌شه وسط هر خوندن و نوشتن پرید و فهمید کِی مقدارش عوض شده.

const obj = {a: 1};
Object.defineProperty(obj, 'a', {
  get() { return 42; },
  set(val) { console.log('you want to set "a" to', val); }
});
console.log(obj.a); // prints '42'
obj.a = 100;        // prints 'you want to set "a" to 100'

قدم بعدی ارزیابی عبارت‌هاییه که تو قالب نوشته می‌شن. نویسنده به جای eval خام از new Function همراه با with(this) استفاده می‌کنه و شیء داده رو بهش bind می‌کنه؛ خودش هم می‌گه این فقط یه‌ذره امن‌تره و صرفاً برای یه فریم‌ورک اسباب‌بازی کافیه. حالا با ترکیب این دوتا، هر عبارت خودش لو می‌ده به کدوم متغیرها وابسته‌ست و با عوض شدن همون‌ها دوباره اجرا می‌شه.

دایرکتیوها با پیشوند q- نوشته می‌شن — q-text برای متن، q-on:click برای رویداد و q-bind برای اتریبیوت — و تابع walk کل درخت DOM رو می‌گرده و هر اتریبیوت رو به داده وصل می‌کنه. نویسنده آخر مقاله یادآوری می‌کنه که Object.defineProperty مال Vue 2 بوده و Vue 3 سراغ Proxy و Reflect رفته، و پیاده‌سازی اون‌ها رو به‌عنوان تمرین به خواننده می‌سپاره. سورس کامل Q هم روی گیت‌هاب در دسترسه.

نکات کلیدی:

• واکنش‌پذیری Vue 2 روی Object.defineProperty سواره؛ getter می‌گه چه متغیری خونده شده و setter می‌گه کِی عوض شده
• برخلاف React خبری از diffing نیست؛ فقط دایرکتیوهای وابسته دوباره اجرا می‌شن
• عبارت‌های داخل قالب با new Function و with(this) ارزیابی می‌شن، نه با eval خام
• دایرکتیوها چیزی جز چندتا تابع کوچیک نیستن که مقدار عبارت رو به یه ویژگی DOM وصل می‌کنن
• Vue 3 همین کار رو با Proxy و Reflect انجام می‌ده