Vue Academy · درس

تقنيات الحفظ المؤقت

تجنّب العمليات الحسابية المتكررة باستخدام الحفظ المؤقت.

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

إنجاز عمل أقل

غالبًا ما يأتي الأداء من عدم إعادة حساب الأشياء التي لم تتغير أو إعادة تصييرها. يوفّر Vue عدة أدوات للحفظ المؤقت تخزّن النتائج وتتجاوز التحديثات غير الضرورية.

التخزين المؤقت لـ computed

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

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

computed مقابل الدالة

تُنفَّذ الدالة في كل مرة يُعاد فيها تصيير القالب، حتى إذا كانت مدخلاتها متطابقة. أما computed فتستخدم قيمتها المخزّنة مؤقتًا، لذا يُفضّل استخدامها للبيانات المشتقة المستخدمة في القوالب.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

v-once للمحتوى الثابت

يصيّر التوجيه v-once العنصر مرة واحدة، ثم يتجاوزه في جميع التحديثات اللاحقة. استخدمه للمحتوى الذي لا يتغير مطلقًا.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

متى تستخدم v-once

طبّق v-once على الأقسام الثابتة الكبيرة مثل التذييل أو نص الشروط أو الترويسة الثابتة. يتعامل Vue مع الناتج المُصيَّر على أنه ثابت، ولا يعيد حساب الفروقات فيه مطلقًا.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

v-memo للقوائم المكلفة

يخزّن التوجيه v-memo شجرة فرعية مؤقتًا، ولا يعيد تصييرها إلا عند تغيّر القيم في مصفوفة تبعياتها. ويظهر أثره بوضوح في القوائم الكبيرة.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

آلية عمل v-memo

لا يُعاد تصيير كل عنصر إلا عند تغيّر مصفوفة الحفظ المؤقت الخاصة به. إذا بقيت قيمة item.selected كما هي، يتجاوز Vue إعادة تصيير ذلك الصف بالكامل، حتى إذا حدّث المكوّن الأب.

تجنّب إعادة التصيير غير الضرورية

تُعاد المكوّنات إلى التصيير عند تغيّر بياناتها التفاعلية أو خصائصها. اجعل المكوّنات صغيرة ومركّزة حتى لا يؤدي تغيّر في منطقة واحدة إلى إجبار الأجزاء غير المرتبطة على إعادة التصيير.

مفاتيح ثابتة في القوائم

امنح v-for دائمًا قيمة :key ثابتة وفريدة. قد يؤدي استخدام فهرس المصفوفة كمفتاح إلى جعل Vue يعيد استخدام عقد DOM غير الصحيحة وإعادة تصيير عناصر أكثر من اللازم.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

الحفاظ على الحد الأدنى من البيانات التفاعلية

لا تضع البيانات في الحالة التفاعلية إلا إذا كان القالب يعتمد عليها. تضيف الكائنات الكبيرة أو القيم التي لا تتغير في واجهة المستخدم عبئًا إلى تتبّع التفاعلية. استخدم متغيرات عادية غير تفاعلية عندما يكون ذلك مناسبًا.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

الحفظ المؤقت للدوال النقية

بالنسبة إلى حسابات JavaScript النقية خارج تفاعلية Vue، يمكنك تخزين النتائج مؤقتًا في خريطة بسيطة، بحيث تُعيد الاستدعاءات المتكررة بالمدخل نفسه النتيجة فورًا.

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

اختبار سريع

اختبر معرفتك بالحفظ المؤقت.

مراجعة

قلّل العمل المهدور باستخدام التخزين المؤقت: تخزّن الخصائص computed القيم المشتقة مؤقتًا، ويصيّر v-once المحتوى الثابت مرة واحدة، بينما يتجاوز v-memo إعادة تصيير الأشجار الفرعية في القوائم الكبيرة. استخدم مفاتيح ثابتة، وحافظ على الحد الأدنى من الحالة التفاعلية. ستتعلّم بعد ذلك كيفية العثور على اختناقات الأداء وإصلاحها باستخدام أدوات فعلية.

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

هل درس «تقنيات الحفظ المؤقت» مجاني؟

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

ماذا ستتعلم في «تقنيات الحفظ المؤقت»؟

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

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

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

كم من الوقت يستغرق درس «تقنيات الحفظ المؤقت»؟

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

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

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

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

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