العقود التفاعلية ذات الأنواع وحدود الاعتماد

<script setup lang="ts">
type Note = { id: string; title: string }
const props = defineProps<{ note: Readonly<Note> }>()
const emit = defineEmits<{ select: [id: string] }>()
function select() { emit("select", props.note.id) }
</script>

<template>
  <button type="button" @click="select">{{ props.note.title }}</button>
</template>

يتطلب مترجم SFC وأدوات TypeScript المتوافقة. حمولة الحدث id المعطى. لم ينفذ مترجم TypeScript أو تشغيل Vue ولا يدعي تحقق البيانات البعيدة.

import { reactive, ref } from "vue"

const entries = reactive([ref("n1")])
const lookup = reactive(new Map([["selected", ref("n2")]]))
const firstId = entries[0].value
const selectedId = lookup.get("selected").value
if (firstId !== "n1" || selectedId !== "n2") {
  throw new Error("COLLECTION_REF_MISMATCH")
}

يتطلب Vue ويشرح السلوك الموثق. ينجح التحقق المقصود وفق العقد لكن المقتطف لم ينفذ ولا يربط أو يعرض مكوّناً.