Vue Academy · درس

التفاعلية المتقدمة: shallowRef وtriggerRef

‏shallowRef لتحسين الأداء، وmarkRaw لاستبعاد القيمة من التفاعلية، وtriggerRef للتشغيل اليدوي

التفاعلية المتقدمة: shallowRef وtriggerRef درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما بعد ref و reactive

تُعد التفاعلية العميقة في Vue مريحة، لكنها ليست دائمًا ما تحتاجون إليه. وبالنسبة إلى الكائنات الكبيرة أو النسخ الخارجية، تكون المتابعة العميقة مُهدِرة. توفّر Vue كلاً من shallowRef وtriggerRef وmarkRaw للتحكم الدقيق.

كيف يتتبّع ref بعمق

يجعل ref العادي الذي يحتوي على كائن الكائن بأكمله تفاعليًا بعمق — ويؤدي تعديل أي خاصية متداخلة إلى تشغيل التحديثات. وهذا ممتاز للحالة الصغيرة، لكنه مكلف بالنسبة إلى البُنى الكبيرة.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: تفاعلية .value فقط

يتتبّع shallowRef إعادة إسناد .value، لكنه لا يتتبّع التعديلات داخل القيمة المحتواة. ولا تؤدي التغييرات الداخلية إلى تشغيل عمليات العرض.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

متى تستخدم shallowRef

استخدموه مع البيانات الكبيرة شبه غير القابلة للتغيير التي تستبدلونها بالكامل، أو لتغليف الكائنات الخارجية (مثل نسخة مخطط أو مجموعة بيانات كبيرة) عندما تضيف المتابعة العميقة عبئًا دون فائدة.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

مشكلة التعديل العميق

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

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: فرض تحديث

تفرض triggerRef يدويًا إعادة تشغيل التأثيرات التي تعتمد على مرجع سطحي، بعد تعديل محتوياته. يمكنكم تجميع تعديلات كثيرة ثم استدعاؤها مرة واحدة.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

نمط لتحسين الأداء

النمط هو: الاحتفاظ ببنية كبيرة داخل shallowRef وتعديلها بحرية دون تكلفة التفاعلية مع كل تغيير، ثم استدعاء triggerRef مرة واحدة عندما تريدون أن تعكس الواجهة هذه التعديلات المجمّعة.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: إلغاء التفاعلية بالكامل

تضع markRaw علامة على كائن بحيث لا يجعله Vue تفاعليًا أبدًا، حتى إذا كان داخل reactive أو ref عادي. استخدموها مع مثيلات الفئات التابعة لجهات خارجية التي لا ينبغي تحويلها إلى proxies.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

لماذا تُعد markRaw مهمة؟

قد يؤدي تغليف مثيلات الفئات المعقدة (مثل الخرائط والمحررات وwebsockets) داخل proxy تفاعلي إلى كسر مراجعها الداخلية أو التسبب في أخطاء دقيقة يصعب اكتشافها. تحافظ markRaw عليها دون تعديل، مع بقائها داخل الحالة التفاعلية.

دمج الأدوات

يمكن تركيب هذه الأدوات معًا: يمنحكم shallowRef الذي يحتفظ بمثيلة معلَّمة باستخدام markRaw خانة يمكن استبدالها تفاعليًا، مع كائن داخلي لا يحوّله Vue إلى proxy أبدًا، وهذا مثالي للتكاملات الخارجية.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

تكلفة التفاعلية مقابل التحكم

المقايضة هي أن التفاعلية العميقة سهلة ولا تتطلب جهدًا، لكنها أثقل؛ بينما تمنحكم واجهات API السطحية تحكمًا وأداءً أفضل، مقابل تحمّل مسؤولية تشغيل التحديثات بأنفسكم. استخدموها فقط عندما يوضح قياس الأداء أن هناك حاجة إليها.

تحقق سريع

تحققوا من فهمكم للتفاعلية المتقدمة.

مراجعة

لقد تعلمتم أدوات التحكم المتقدمة في التفاعلية:

يتفاعل shallowRef فقط عند إعادة إسناد .value، وليس عند تعديل المحتويات الداخلية، ولذلك فهو مناسب للبيانات الكبيرة أو الخارجية.
تفرض triggerRef التحديثات يدويًا بعد تعديل محتويات المرجع السطحي، أي يمكنكم التجميع ثم التشغيل مرة واحدة.
تلغي markRaw تفاعلية الكائن نهائيًا، ولذلك فهي مناسبة لمثيلات الفئات التابعة لجهات خارجية.
تمنحكم هذه الأدوات أداءً وتحكمًا أفضل، مقابل تحمّل مسؤولية تشغيل التحديثات بأنفسكم.

الأسئلة الشائعة

هل درس «التفاعلية المتقدمة: shallowRef وtriggerRef» مجاني؟

نعم — نص درس «التفاعلية المتقدمة: shallowRef وtriggerRef» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «التفاعلية المتقدمة: shallowRef وtriggerRef»؟

‏shallowRef لتحسين الأداء، وmarkRaw لاستبعاد القيمة من التفاعلية، وtriggerRef للتشغيل اليدوي تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «التفاعلية المتقدمة: shallowRef وtriggerRef»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التفاعلية المتقدمة: shallowRef وtriggerRef
مصانع Composables وComposables ذات المعلمات
آلات الحالة باستخدام XState في Vue
‏effectScope للتأثيرات المجمّعة

← العودة إلى Vue Academy