Vue.js

Appearance

On this page

أساسيات التفاعلية ​

تفضيلات واجهة البرمجة

هاته الصفحة والعديد من المحاور الأخرى في المرجع تحتوي على محتوى مختلف بواجهة الخيارات و الواجهة التركيبية. تفضيلك الحاليل هو واجهة الخياراتالواجهة التركيبية. يمكنك التبديل بين نمطي الواجهتين باستخدام مفاتيح التبديل "تفضيلات واجهة البرمجة" في أعلى جانب الشريط الجانبي الأيسر.

التصريح بحالة تفاعلية ​

مع واجهة الخيارات، نستخدم خيار data للتصريح بحالة تفاعلية داخل المكون. قيمة الخيار يجب أن تكون دالة تعيد كائن {}. ستقوم Vue باستدعاء الدالة عند إنشاء نسخة جديدة من المكون، وتغليف الكائن المعاد في نظام تفاعليته. أي خاصيات من المستوى الأعلى من المكونات الأم أو من جذر التطبيق لهذا الكائن متاحة على مستوى نسخة المكون (this في التوابع وخطافات دورة الحياة) :

js
export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` هي خطاف دورة حياة سنشرحها لاحقا
  mounted() {
    // `this` يشير إلى نسخة المكون
    console.log(this.count) // => 1

    // الخاصيات من الكائن المعاد يمكن تغييرها
    this.count = 2
  }
}

اختبره في حقل التجارب

هاته الخاصيات التابعة لنسخة المكون تُضاف فقط عند إنشاء النسخة لأول مرة، لذا يجب التأكد من وجود كلها في الكائن المعاد من الدالة data. حين تقتضي الضرورة، استخدم null، undefined أو بعض القيم المؤقتة للخاصيات التي لا تتوفر قيمها الحقيقية عندئذ.

من الممكن إضافة خاصية جديدة مباشرة إلى this دون تضمينها في data. لكن لن تتمكن الخصائص المضافة بهذه الطريقة من تشغيل تحديثات تفاعلية.

Vue تستخدم البادئة $ لتوفير واجهات برمجة للخاصيات الجذرية داخل نسخة المكون. كما أنها تحجز البادئة _ للخاصيات الداخلية. يجب عليك تجنب استخدام أسماء لخاصيات الـdata الرئيسية التي تبدأ بأحد هذه الرموز.

الوسيط التفاعلي مقابل الأصلي ​

في Vue 3، يتم جعل البيانات تفاعلية عن طريق استخدام JavaScript وسائط. يجب على المستخدمين القادمين من Vue 2 أن يكونوا على علم بالحالة المحددة التالية:

js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

عندما تصل إلى this.someObject بعد تعيينه، فإن القيمة هي وسيط تفاعلي لـ newObject الأصلي. على عكس Vue 2، فإن newObject الأصلي يبقى غير متغير ولن يتم جعله تفاعليًا: تأكد دائمًا من الوصول إلى الحالة التفاعلية كخاصية لـ this.

التصريح بحالة تفاعلية ​

ref() ​

في الواجهة التركيبية، الطريقة الموصى بها للتصريح بالحالة التفاعلية هي استخدام دالة ()ref:

js
import { ref } from 'vue'

const count = ref(0)

الدالة ()ref تأخذ الوسيط وتعيده مغلفا داخل كائن تفاعلي مع خاصية value.:

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

اطلع أيضا على : كيفية إضافة النوع إلى ref

من أجل الوصول إلى المرجع التفاعلي في قالب المكون، قم بتصريحه وإرجاعه من دالة ()setup للمكون:

js
import { ref } from 'vue'

export default {
  // `setup` هو خطاف خاص مخصص للواجهة التركيبية
  setup() {
    const count = ref(0)

    // عرض المرجع للقالب
    return {
      count
    }
  }
}
template
<div>{{ count }}</div>

تجدر الملاحظة أننا لم نحتاج إلى إضافة value. عند استخدام المرجع التفاعلي في قالب المكون. بشكل ملائم، يفك المرجع تلقائيًا عند استخدامه داخل القوالب (مع بعض التنبيهات).

يمكنك أيضًا تغيير المرجع مباشرة في معالجات الأحداث:

template
<button @click="count++">
  {{ count }}
</button>

من أجل الشيفرة المعقدة، يمكننا التصريح يالدوال التي تغيّر المراجع في نفس النطاق وعرضها كتوابع إلى جانب الحالة:

js
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // .value مطلوب في جافاسكريبت
      count.value++
    }

    // لا تنسى عرض الدالة أيضًا.
    return {
      count,
      increment
    }
  }
}

الدوال المعروضة يمكن استخدامها كمستمعات للأحداث:

template
<button @click="increment">
  {{ count }}
</button>

هنا المثال المباشر على Codepen، بدون استخدام أي أدوات بناء.

<script setup>