[{"data":1,"prerenderedAt":4508},["ShallowReactive",2],{"post-/anmat-vue3-asasyh-2025-ar":3,"author-رائد-البحري-ar":4490},{"id":4,"title":5,"author":6,"body":7,"category":4464,"description":4465,"extension":4466,"image":4467,"isDraft":4468,"isFeatured":187,"locale":4469,"meta":4470,"navigation":187,"path":4475,"publishedAt":4476,"readingTime":414,"seo":4477,"stem":4478,"tags":4479,"updatedAt":4488,"__hash__":4489},"articles_ar/أنماط-vue3-أساسية-2025.md","أنماط Vue 3 الأساسية لبناء تطبيقات حديثة وقابلة للتوسع في 2025","رائد-البحري",{"type":8,"value":9,"toc":4420},"minimark",[10,14,19,22,100,586,590,593,598,915,919,1171,1175,1179,1624,1628,1932,1936,1940,2230,2234,2392,2396,2406,2484,2491,2598,2605,2705,2709,2713,2928,2932,3223,3227,3231,3441,3445,3595,3599,3603,3610,3614,3620,3624,3628,3899,3903,4270,4274,4278,4281,4295,4299,4407,4410,4413,4416],[11,12,13],"p",{},"ثور Vue 3 طريقة بناء المطورين للواجهات التفاعلية والأداء العالي. Composition API، دعم TypeScript المحسن، والميزات الجديدة مثل Teleport و Suspense مهدت الطريق لتطوير تطبيقات أكثر قابلية للتوسع، قابلية للصيانة، وكفاءة. إتقان أنماط Vue 3 الأساسية أمر حاسم لأي مطور يريد بناء تطبيقات ويب حديثة. يتعمق هذا الدليل في الأنماط والممارسات الأساسية الرئيسية.",[15,16,18],"h2",{"id":17},"_1-إتقان-composition-api","1. إتقان Composition API",[11,20,21],{},"Composition API هو حجر الأساس لتطوير Vue 3 الحديث، حيث يوفر طريقة مرنة لتنظيم وإعادة استخدام المنطق.",[23,24,25,38,64,74],"ul",{},[26,27,28,37],"li",{},[29,30,31,32,36],"strong",{},"دالة ",[33,34,35],"code",{},"setup()",":"," نقطة الدخول لاستخدام Composition API داخل المكونات. هناك حيث تعلن الحالة التفاعلية، الخصائص المحسوبة، المراقبين، وخطافات دورة الحياة.",[26,39,40,50],{},[29,41,42,43,46,47,36],{},"التفاعل مع ",[33,44,45],{},"ref"," و ",[33,48,49],{},"reactive",[23,51,52,58],{},[26,53,54,57],{},[33,55,56],{},"ref()",": يُستخدم لإنشاء مراجع تفاعلية للقيم البدائية (String، Number، Boolean) أو كائنات فردية.",[26,59,60,63],{},[33,61,62],{},"reactive()",": يُستخدم لإنشاء وكلاء تفاعليين للكائنات. يتم تتبع التغييرات في خصائص الكائن.",[26,65,66,73],{},[29,67,68,69,72],{},"الخصائص المحسوبة (",[33,70,71],{},"computed",")",": لاشتقاق الحالة بناءً على مصادر تفاعلية أخرى. يتم تخزينها مؤقتاً وإعادة تقييمها فقط عندما تتغير تبعياتها.",[26,75,76,85,86],{},[29,77,78,79,46,82,72],{},"المراقبون (",[33,80,81],{},"watch",[33,83,84],{},"watchEffect",":\n",[23,87,88,94],{},[26,89,90,93],{},[33,91,92],{},"watch()",": مراقبة مصدر تفاعلي محدد صراحة وتشغيل رد الاتصال عند تغييره. يوفر تحكماً أكبر في التبعيات والتوقيت.",[26,95,96,99],{},[33,97,98],{},"watchEffect()",": يشغل دالة فوراً ويعيد تشغيلها كلما تغيرت أي من تبعياتها التفاعلية. أبسط للتأثيرات الجانبية المباشرة.",[101,102,107],"pre",{"className":103,"code":104,"language":105,"meta":106,"style":106},"language-vue shiki shiki-themes github-light dark-plus dark-plus","\u003Cscript setup lang=\"ts\">\nimport { ref, reactive, computed, watch, watchEffect } from \"vue\";\n\n// الحالة التفاعلية\nconst count = ref(0);\nconst user = reactive({ name: \"John Doe\", age: 30 });\n\n// الخاصية المحسوبة\nconst doubledCount = computed(() => count.value * 2);\n\n// المراقب\nwatch(count, (newCount, oldCount) => {\n  console.log(`Count changed from ${oldCount} to ${newCount}`);\n});\n\n// مراقب التأثير\nwatchEffect(() => {\n  console.log(`Count is ${count.value}`);\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ count }}\u003C/p>\n    \u003Cp>Doubled: {{ doubledCount }}\u003C/p>\n    \u003Cbutton @click=\"count++\">Increment\u003C/button>\n  \u003C/div>\n\u003C/template>\n","vue","",[33,108,109,140,182,189,196,225,258,263,269,304,309,315,345,384,390,395,401,412,441,446,456,461,471,482,507,530,567,577],{"__ignoreMap":106},[110,111,114,118,122,126,129,133,137],"span",{"class":112,"line":113},"line",1,[110,115,117],{"class":116},"sffyN","\u003C",[110,119,121],{"class":120},"ssFZ1","script",[110,123,125],{"class":124},"sFcZJ"," setup",[110,127,128],{"class":124}," lang",[110,130,132],{"class":131},"sG4b4","=",[110,134,136],{"class":135},"sGDl4","\"ts\"",[110,138,139],{"class":116},">\n",[110,141,143,147,150,153,156,158,160,162,164,166,168,170,173,176,179],{"class":112,"line":142},2,[110,144,146],{"class":145},"sEkCa","import",[110,148,149],{"class":131}," { ",[110,151,45],{"class":152},"sZiGn",[110,154,155],{"class":131},", ",[110,157,49],{"class":152},[110,159,155],{"class":131},[110,161,71],{"class":152},[110,163,155],{"class":131},[110,165,81],{"class":152},[110,167,155],{"class":131},[110,169,84],{"class":152},[110,171,172],{"class":131}," } ",[110,174,175],{"class":145},"from",[110,177,178],{"class":135}," \"vue\"",[110,180,181],{"class":131},";\n",[110,183,185],{"class":112,"line":184},3,[110,186,188],{"emptyLinePlaceholder":187},true,"\n",[110,190,192],{"class":112,"line":191},4,[110,193,195],{"class":194},"s56mj","// الحالة التفاعلية\n",[110,197,199,203,207,211,215,218,222],{"class":112,"line":198},5,[110,200,202],{"class":201},"s5uUr","const",[110,204,206],{"class":205},"sToQf"," count",[110,208,210],{"class":209},"s1p9p"," =",[110,212,214],{"class":213},"svuFb"," ref",[110,216,217],{"class":131},"(",[110,219,221],{"class":220},"seC34","0",[110,223,224],{"class":131},");\n",[110,226,228,230,233,235,238,241,244,247,249,252,255],{"class":112,"line":227},6,[110,229,202],{"class":201},[110,231,232],{"class":205}," user",[110,234,210],{"class":209},[110,236,237],{"class":213}," reactive",[110,239,240],{"class":131},"({ ",[110,242,243],{"class":152},"name:",[110,245,246],{"class":135}," \"John Doe\"",[110,248,155],{"class":131},[110,250,251],{"class":152},"age:",[110,253,254],{"class":220}," 30",[110,256,257],{"class":131}," });\n",[110,259,261],{"class":112,"line":260},7,[110,262,188],{"emptyLinePlaceholder":187},[110,264,266],{"class":112,"line":265},8,[110,267,268],{"class":194},"// الخاصية المحسوبة\n",[110,270,272,274,277,279,282,285,288,290,293,296,299,302],{"class":112,"line":271},9,[110,273,202],{"class":201},[110,275,276],{"class":205}," doubledCount",[110,278,210],{"class":209},[110,280,281],{"class":213}," computed",[110,283,284],{"class":131},"(() ",[110,286,287],{"class":201},"=>",[110,289,206],{"class":152},[110,291,292],{"class":131},".",[110,294,295],{"class":152},"value",[110,297,298],{"class":209}," *",[110,300,301],{"class":220}," 2",[110,303,224],{"class":131},[110,305,307],{"class":112,"line":306},10,[110,308,188],{"emptyLinePlaceholder":187},[110,310,312],{"class":112,"line":311},11,[110,313,314],{"class":194},"// المراقب\n",[110,316,318,320,322,325,328,332,334,337,340,342],{"class":112,"line":317},12,[110,319,81],{"class":213},[110,321,217],{"class":131},[110,323,324],{"class":152},"count",[110,326,327],{"class":131},", (",[110,329,331],{"class":330},"s9TRk","newCount",[110,333,155],{"class":131},[110,335,336],{"class":330},"oldCount",[110,338,339],{"class":131},") ",[110,341,287],{"class":201},[110,343,344],{"class":131}," {\n",[110,346,348,351,353,356,358,361,365,367,370,373,375,377,379,382],{"class":112,"line":347},13,[110,349,350],{"class":152},"  console",[110,352,292],{"class":131},[110,354,355],{"class":213},"log",[110,357,217],{"class":131},[110,359,360],{"class":135},"`Count changed from ",[110,362,364],{"class":363},"se2iQ","${",[110,366,336],{"class":152},[110,368,369],{"class":363},"}",[110,371,372],{"class":135}," to ",[110,374,364],{"class":363},[110,376,331],{"class":152},[110,378,369],{"class":363},[110,380,381],{"class":135},"`",[110,383,224],{"class":131},[110,385,387],{"class":112,"line":386},14,[110,388,389],{"class":131},"});\n",[110,391,393],{"class":112,"line":392},15,[110,394,188],{"emptyLinePlaceholder":187},[110,396,398],{"class":112,"line":397},16,[110,399,400],{"class":194},"// مراقب التأثير\n",[110,402,404,406,408,410],{"class":112,"line":403},17,[110,405,84],{"class":213},[110,407,284],{"class":131},[110,409,287],{"class":201},[110,411,344],{"class":131},[110,413,415,417,419,421,423,426,428,430,433,435,437,439],{"class":112,"line":414},18,[110,416,350],{"class":152},[110,418,292],{"class":131},[110,420,355],{"class":213},[110,422,217],{"class":131},[110,424,425],{"class":135},"`Count is ",[110,427,364],{"class":363},[110,429,324],{"class":152},[110,431,292],{"class":432},"s5T4v",[110,434,295],{"class":152},[110,436,369],{"class":363},[110,438,381],{"class":135},[110,440,224],{"class":131},[110,442,444],{"class":112,"line":443},19,[110,445,389],{"class":131},[110,447,449,452,454],{"class":112,"line":448},20,[110,450,451],{"class":116},"\u003C/",[110,453,121],{"class":120},[110,455,139],{"class":116},[110,457,459],{"class":112,"line":458},21,[110,460,188],{"emptyLinePlaceholder":187},[110,462,464,466,469],{"class":112,"line":463},22,[110,465,117],{"class":116},[110,467,468],{"class":120},"template",[110,470,139],{"class":116},[110,472,474,477,480],{"class":112,"line":473},23,[110,475,476],{"class":116},"  \u003C",[110,478,479],{"class":120},"div",[110,481,139],{"class":116},[110,483,485,488,490,493,496,498,501,503,505],{"class":112,"line":484},24,[110,486,487],{"class":116},"    \u003C",[110,489,11],{"class":120},[110,491,492],{"class":116},">",[110,494,495],{"class":131},"Count: {{ ",[110,497,324],{"class":152},[110,499,500],{"class":131}," }}",[110,502,451],{"class":116},[110,504,11],{"class":120},[110,506,139],{"class":116},[110,508,510,512,514,516,519,522,524,526,528],{"class":112,"line":509},25,[110,511,487],{"class":116},[110,513,11],{"class":120},[110,515,492],{"class":116},[110,517,518],{"class":131},"Doubled: {{ ",[110,520,521],{"class":152},"doubledCount",[110,523,500],{"class":131},[110,525,451],{"class":116},[110,527,11],{"class":120},[110,529,139],{"class":116},[110,531,533,535,538,541,544,546,549,551,554,556,558,561,563,565],{"class":112,"line":532},26,[110,534,487],{"class":116},[110,536,537],{"class":120},"button",[110,539,540],{"class":131}," @",[110,542,543],{"class":124},"click",[110,545,132],{"class":131},[110,547,548],{"class":432},"\"",[110,550,324],{"class":152},[110,552,553],{"class":209},"++",[110,555,548],{"class":432},[110,557,492],{"class":116},[110,559,560],{"class":131},"Increment",[110,562,451],{"class":116},[110,564,537],{"class":120},[110,566,139],{"class":116},[110,568,570,573,575],{"class":112,"line":569},27,[110,571,572],{"class":116},"  \u003C/",[110,574,479],{"class":120},[110,576,139],{"class":116},[110,578,580,582,584],{"class":112,"line":579},28,[110,581,451],{"class":116},[110,583,468],{"class":120},[110,585,139],{"class":116},[15,587,589],{"id":588},"_2-إدارة-الحالة-مع-pinia","2. إدارة الحالة مع Pinia",[11,591,592],{},"Pinia هو حل إدارة الحالة الرسمي لـ Vue 3، ويوفر طريقة حديثة وبديهية لإدارة الحالة العامة.",[594,595,597],"h3",{"id":596},"إنشاء-مخزن-pinia","إنشاء مخزن Pinia",[101,599,603],{"className":600,"code":601,"language":602,"meta":106,"style":106},"language-typescript shiki shiki-themes github-light dark-plus dark-plus","// stores/counter.ts\nimport { defineStore } from 'pinia'\nimport { ref, computed } from 'vue'\n\nexport const useCounterStore = defineStore('counter', () => {\n  // الحالة\n  const count = ref(0)\n  const name = ref('Counter')\n\n  // الجيترات\n  const doubleCount = computed(() => count.value * 2)\n\n  // الإجراءات\n  function increment() {\n    count.value++\n  }\n\n  function decrement() {\n    count.value--\n  }\n\n  function reset() {\n    count.value = 0\n  }\n\n  return {\n    count,\n    name,\n    doubleCount,\n    increment,\n    decrement,\n    reset\n  }\n})\n","typescript",[33,604,605,610,626,645,649,677,682,700,718,722,727,754,758,763,774,786,791,795,804,815,819,823,832,845,849,853,860,867,874,882,890,898,904,909],{"__ignoreMap":106},[110,606,607],{"class":112,"line":113},[110,608,609],{"class":194},"// stores/counter.ts\n",[110,611,612,614,616,619,621,623],{"class":112,"line":142},[110,613,146],{"class":145},[110,615,149],{"class":131},[110,617,618],{"class":152},"defineStore",[110,620,172],{"class":131},[110,622,175],{"class":145},[110,624,625],{"class":135}," 'pinia'\n",[110,627,628,630,632,634,636,638,640,642],{"class":112,"line":184},[110,629,146],{"class":145},[110,631,149],{"class":131},[110,633,45],{"class":152},[110,635,155],{"class":131},[110,637,71],{"class":152},[110,639,172],{"class":131},[110,641,175],{"class":145},[110,643,644],{"class":135}," 'vue'\n",[110,646,647],{"class":112,"line":191},[110,648,188],{"emptyLinePlaceholder":187},[110,650,651,654,657,660,662,665,667,670,673,675],{"class":112,"line":198},[110,652,653],{"class":145},"export",[110,655,656],{"class":201}," const",[110,658,659],{"class":205}," useCounterStore",[110,661,210],{"class":209},[110,663,664],{"class":213}," defineStore",[110,666,217],{"class":131},[110,668,669],{"class":135},"'counter'",[110,671,672],{"class":131},", () ",[110,674,287],{"class":201},[110,676,344],{"class":131},[110,678,679],{"class":112,"line":227},[110,680,681],{"class":194},"  // الحالة\n",[110,683,684,687,689,691,693,695,697],{"class":112,"line":260},[110,685,686],{"class":201},"  const",[110,688,206],{"class":205},[110,690,210],{"class":209},[110,692,214],{"class":213},[110,694,217],{"class":131},[110,696,221],{"class":220},[110,698,699],{"class":131},")\n",[110,701,702,704,707,709,711,713,716],{"class":112,"line":265},[110,703,686],{"class":201},[110,705,706],{"class":205}," name",[110,708,210],{"class":209},[110,710,214],{"class":213},[110,712,217],{"class":131},[110,714,715],{"class":135},"'Counter'",[110,717,699],{"class":131},[110,719,720],{"class":112,"line":271},[110,721,188],{"emptyLinePlaceholder":187},[110,723,724],{"class":112,"line":306},[110,725,726],{"class":194},"  // الجيترات\n",[110,728,729,731,734,736,738,740,742,744,746,748,750,752],{"class":112,"line":311},[110,730,686],{"class":201},[110,732,733],{"class":205}," doubleCount",[110,735,210],{"class":209},[110,737,281],{"class":213},[110,739,284],{"class":131},[110,741,287],{"class":201},[110,743,206],{"class":152},[110,745,292],{"class":131},[110,747,295],{"class":152},[110,749,298],{"class":209},[110,751,301],{"class":220},[110,753,699],{"class":131},[110,755,756],{"class":112,"line":317},[110,757,188],{"emptyLinePlaceholder":187},[110,759,760],{"class":112,"line":347},[110,761,762],{"class":194},"  // الإجراءات\n",[110,764,765,768,771],{"class":112,"line":386},[110,766,767],{"class":201},"  function",[110,769,770],{"class":213}," increment",[110,772,773],{"class":131},"() {\n",[110,775,776,779,781,783],{"class":112,"line":392},[110,777,778],{"class":152},"    count",[110,780,292],{"class":131},[110,782,295],{"class":152},[110,784,785],{"class":209},"++\n",[110,787,788],{"class":112,"line":397},[110,789,790],{"class":131},"  }\n",[110,792,793],{"class":112,"line":403},[110,794,188],{"emptyLinePlaceholder":187},[110,796,797,799,802],{"class":112,"line":414},[110,798,767],{"class":201},[110,800,801],{"class":213}," decrement",[110,803,773],{"class":131},[110,805,806,808,810,812],{"class":112,"line":443},[110,807,778],{"class":152},[110,809,292],{"class":131},[110,811,295],{"class":152},[110,813,814],{"class":209},"--\n",[110,816,817],{"class":112,"line":448},[110,818,790],{"class":131},[110,820,821],{"class":112,"line":458},[110,822,188],{"emptyLinePlaceholder":187},[110,824,825,827,830],{"class":112,"line":463},[110,826,767],{"class":201},[110,828,829],{"class":213}," reset",[110,831,773],{"class":131},[110,833,834,836,838,840,842],{"class":112,"line":473},[110,835,778],{"class":152},[110,837,292],{"class":131},[110,839,295],{"class":152},[110,841,210],{"class":209},[110,843,844],{"class":220}," 0\n",[110,846,847],{"class":112,"line":484},[110,848,790],{"class":131},[110,850,851],{"class":112,"line":509},[110,852,188],{"emptyLinePlaceholder":187},[110,854,855,858],{"class":112,"line":532},[110,856,857],{"class":145},"  return",[110,859,344],{"class":131},[110,861,862,864],{"class":112,"line":569},[110,863,778],{"class":152},[110,865,866],{"class":131},",\n",[110,868,869,872],{"class":112,"line":579},[110,870,871],{"class":152},"    name",[110,873,866],{"class":131},[110,875,877,880],{"class":112,"line":876},29,[110,878,879],{"class":152},"    doubleCount",[110,881,866],{"class":131},[110,883,885,888],{"class":112,"line":884},30,[110,886,887],{"class":152},"    increment",[110,889,866],{"class":131},[110,891,893,896],{"class":112,"line":892},31,[110,894,895],{"class":152},"    decrement",[110,897,866],{"class":131},[110,899,901],{"class":112,"line":900},32,[110,902,903],{"class":152},"    reset\n",[110,905,907],{"class":112,"line":906},33,[110,908,790],{"class":131},[110,910,912],{"class":112,"line":911},34,[110,913,914],{"class":131},"})\n",[594,916,918],{"id":917},"استخدام-المخزن-في-المكونات","استخدام المخزن في المكونات",[101,920,922],{"className":103,"code":921,"language":105,"meta":106,"style":106},"\u003Cscript setup lang=\"ts\">\nimport { useCounterStore } from '@/stores/counter'\n\nconst counterStore = useCounterStore()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ counterStore.count }}\u003C/p>\n    \u003Cp>Double: {{ counterStore.doubleCount }}\u003C/p>\n    \u003Cbutton @click=\"counterStore.increment\">+\u003C/button>\n    \u003Cbutton @click=\"counterStore.decrement\">-\u003C/button>\n    \u003Cbutton @click=\"counterStore.reset\">Reset\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[33,923,924,940,956,960,974,982,986,994,1002,1027,1053,1087,1121,1155,1163],{"__ignoreMap":106},[110,925,926,928,930,932,934,936,938],{"class":112,"line":113},[110,927,117],{"class":116},[110,929,121],{"class":120},[110,931,125],{"class":124},[110,933,128],{"class":124},[110,935,132],{"class":131},[110,937,136],{"class":135},[110,939,139],{"class":116},[110,941,942,944,946,949,951,953],{"class":112,"line":142},[110,943,146],{"class":145},[110,945,149],{"class":131},[110,947,948],{"class":152},"useCounterStore",[110,950,172],{"class":131},[110,952,175],{"class":145},[110,954,955],{"class":135}," '@/stores/counter'\n",[110,957,958],{"class":112,"line":184},[110,959,188],{"emptyLinePlaceholder":187},[110,961,962,964,967,969,971],{"class":112,"line":191},[110,963,202],{"class":201},[110,965,966],{"class":205}," counterStore",[110,968,210],{"class":209},[110,970,659],{"class":213},[110,972,973],{"class":131},"()\n",[110,975,976,978,980],{"class":112,"line":198},[110,977,451],{"class":116},[110,979,121],{"class":120},[110,981,139],{"class":116},[110,983,984],{"class":112,"line":227},[110,985,188],{"emptyLinePlaceholder":187},[110,987,988,990,992],{"class":112,"line":260},[110,989,117],{"class":116},[110,991,468],{"class":120},[110,993,139],{"class":116},[110,995,996,998,1000],{"class":112,"line":265},[110,997,476],{"class":116},[110,999,479],{"class":120},[110,1001,139],{"class":116},[110,1003,1004,1006,1008,1010,1012,1015,1017,1019,1021,1023,1025],{"class":112,"line":271},[110,1005,487],{"class":116},[110,1007,11],{"class":120},[110,1009,492],{"class":116},[110,1011,495],{"class":131},[110,1013,1014],{"class":152},"counterStore",[110,1016,292],{"class":131},[110,1018,324],{"class":152},[110,1020,500],{"class":131},[110,1022,451],{"class":116},[110,1024,11],{"class":120},[110,1026,139],{"class":116},[110,1028,1029,1031,1033,1035,1038,1040,1042,1045,1047,1049,1051],{"class":112,"line":306},[110,1030,487],{"class":116},[110,1032,11],{"class":120},[110,1034,492],{"class":116},[110,1036,1037],{"class":131},"Double: {{ ",[110,1039,1014],{"class":152},[110,1041,292],{"class":131},[110,1043,1044],{"class":152},"doubleCount",[110,1046,500],{"class":131},[110,1048,451],{"class":116},[110,1050,11],{"class":120},[110,1052,139],{"class":116},[110,1054,1055,1057,1059,1061,1063,1065,1067,1069,1071,1074,1076,1078,1081,1083,1085],{"class":112,"line":311},[110,1056,487],{"class":116},[110,1058,537],{"class":120},[110,1060,540],{"class":131},[110,1062,543],{"class":124},[110,1064,132],{"class":131},[110,1066,548],{"class":432},[110,1068,1014],{"class":152},[110,1070,292],{"class":131},[110,1072,1073],{"class":152},"increment",[110,1075,548],{"class":432},[110,1077,492],{"class":116},[110,1079,1080],{"class":131},"+",[110,1082,451],{"class":116},[110,1084,537],{"class":120},[110,1086,139],{"class":116},[110,1088,1089,1091,1093,1095,1097,1099,1101,1103,1105,1108,1110,1112,1115,1117,1119],{"class":112,"line":317},[110,1090,487],{"class":116},[110,1092,537],{"class":120},[110,1094,540],{"class":131},[110,1096,543],{"class":124},[110,1098,132],{"class":131},[110,1100,548],{"class":432},[110,1102,1014],{"class":152},[110,1104,292],{"class":131},[110,1106,1107],{"class":152},"decrement",[110,1109,548],{"class":432},[110,1111,492],{"class":116},[110,1113,1114],{"class":131},"-",[110,1116,451],{"class":116},[110,1118,537],{"class":120},[110,1120,139],{"class":116},[110,1122,1123,1125,1127,1129,1131,1133,1135,1137,1139,1142,1144,1146,1149,1151,1153],{"class":112,"line":347},[110,1124,487],{"class":116},[110,1126,537],{"class":120},[110,1128,540],{"class":131},[110,1130,543],{"class":124},[110,1132,132],{"class":131},[110,1134,548],{"class":432},[110,1136,1014],{"class":152},[110,1138,292],{"class":131},[110,1140,1141],{"class":152},"reset",[110,1143,548],{"class":432},[110,1145,492],{"class":116},[110,1147,1148],{"class":131},"Reset",[110,1150,451],{"class":116},[110,1152,537],{"class":120},[110,1154,139],{"class":116},[110,1156,1157,1159,1161],{"class":112,"line":386},[110,1158,572],{"class":116},[110,1160,479],{"class":120},[110,1162,139],{"class":116},[110,1164,1165,1167,1169],{"class":112,"line":392},[110,1166,451],{"class":116},[110,1168,468],{"class":120},[110,1170,139],{"class":116},[15,1172,1174],{"id":1173},"_3-أنماط-المكونات-المتقدمة","3. أنماط المكونات المتقدمة",[594,1176,1178],{"id":1177},"نمط-المكونات-المركبة-composite-components","نمط المكونات المركبة (Composite Components)",[101,1180,1182],{"className":103,"code":1181,"language":105,"meta":106,"style":106},"\u003C!-- components/FormField.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue'\n\ninterface Props {\n  label: string\n  modelValue: string\n  error?: string\n}\n\nconst props = defineProps\u003CProps>()\nconst emit = defineEmits\u003C{\n  'update:modelValue': [value: string]\n}>()\n\nconst inputClasses = computed(() => ({\n  'border-red-500': !!props.error,\n  'border-gray-300': !props.error\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"form-field\">\n    \u003Clabel class=\"block text-sm font-medium text-gray-700\">\n      {{ label }}\n    \u003C/label>\n    \u003Cinput\n      :value=\"modelValue\"\n      @input=\"$emit('update:modelValue', $event.target.value)\"\n      :class=\"inputClasses\"\n      class=\"mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500\"\n    />\n    \u003Cp v-if=\"error\" class=\"mt-1 text-sm text-red-600\">\n      {{ error }}\n    \u003C/p>\n  \u003C/div>\n\u003C/template>\n",[33,1183,1184,1189,1205,1219,1223,1234,1245,1254,1264,1269,1273,1293,1308,1330,1335,1339,1357,1377,1394,1399,1407,1411,1419,1435,1451,1461,1470,1477,1494,1532,1548,1558,1563,1589,1597,1606,1615],{"__ignoreMap":106},[110,1185,1186],{"class":112,"line":113},[110,1187,1188],{"class":194},"\u003C!-- components/FormField.vue -->\n",[110,1190,1191,1193,1195,1197,1199,1201,1203],{"class":112,"line":142},[110,1192,117],{"class":116},[110,1194,121],{"class":120},[110,1196,125],{"class":124},[110,1198,128],{"class":124},[110,1200,132],{"class":131},[110,1202,136],{"class":135},[110,1204,139],{"class":116},[110,1206,1207,1209,1211,1213,1215,1217],{"class":112,"line":184},[110,1208,146],{"class":145},[110,1210,149],{"class":131},[110,1212,71],{"class":152},[110,1214,172],{"class":131},[110,1216,175],{"class":145},[110,1218,644],{"class":135},[110,1220,1221],{"class":112,"line":191},[110,1222,188],{"emptyLinePlaceholder":187},[110,1224,1225,1228,1232],{"class":112,"line":198},[110,1226,1227],{"class":201},"interface",[110,1229,1231],{"class":1230},"su_XB"," Props",[110,1233,344],{"class":131},[110,1235,1236,1239,1241],{"class":112,"line":227},[110,1237,1238],{"class":330},"  label",[110,1240,36],{"class":209},[110,1242,1244],{"class":1243},"s6-XD"," string\n",[110,1246,1247,1250,1252],{"class":112,"line":260},[110,1248,1249],{"class":330},"  modelValue",[110,1251,36],{"class":209},[110,1253,1244],{"class":1243},[110,1255,1256,1259,1262],{"class":112,"line":265},[110,1257,1258],{"class":330},"  error",[110,1260,1261],{"class":209},"?:",[110,1263,1244],{"class":1243},[110,1265,1266],{"class":112,"line":271},[110,1267,1268],{"class":131},"}\n",[110,1270,1271],{"class":112,"line":306},[110,1272,188],{"emptyLinePlaceholder":187},[110,1274,1275,1277,1280,1282,1285,1287,1290],{"class":112,"line":311},[110,1276,202],{"class":201},[110,1278,1279],{"class":205}," props",[110,1281,210],{"class":209},[110,1283,1284],{"class":213}," defineProps",[110,1286,117],{"class":131},[110,1288,1289],{"class":1230},"Props",[110,1291,1292],{"class":131},">()\n",[110,1294,1295,1297,1300,1302,1305],{"class":112,"line":317},[110,1296,202],{"class":201},[110,1298,1299],{"class":205}," emit",[110,1301,210],{"class":209},[110,1303,1304],{"class":213}," defineEmits",[110,1306,1307],{"class":131},"\u003C{\n",[110,1309,1310,1313,1315,1318,1321,1324,1327],{"class":112,"line":347},[110,1311,1312],{"class":135},"  'update:modelValue'",[110,1314,36],{"class":209},[110,1316,1317],{"class":131}," [",[110,1319,295],{"class":1320},"sGRYn",[110,1322,1323],{"class":131},": ",[110,1325,1326],{"class":1243},"string",[110,1328,1329],{"class":131},"]\n",[110,1331,1332],{"class":112,"line":386},[110,1333,1334],{"class":131},"}>()\n",[110,1336,1337],{"class":112,"line":392},[110,1338,188],{"emptyLinePlaceholder":187},[110,1340,1341,1343,1346,1348,1350,1352,1354],{"class":112,"line":397},[110,1342,202],{"class":201},[110,1344,1345],{"class":205}," inputClasses",[110,1347,210],{"class":209},[110,1349,281],{"class":213},[110,1351,284],{"class":131},[110,1353,287],{"class":201},[110,1355,1356],{"class":131}," ({\n",[110,1358,1359,1362,1364,1367,1370,1372,1375],{"class":112,"line":403},[110,1360,1361],{"class":135},"  'border-red-500'",[110,1363,36],{"class":152},[110,1365,1366],{"class":209}," !!",[110,1368,1369],{"class":152},"props",[110,1371,292],{"class":131},[110,1373,1374],{"class":152},"error",[110,1376,866],{"class":131},[110,1378,1379,1382,1384,1387,1389,1391],{"class":112,"line":414},[110,1380,1381],{"class":135},"  'border-gray-300'",[110,1383,36],{"class":152},[110,1385,1386],{"class":209}," !",[110,1388,1369],{"class":152},[110,1390,292],{"class":131},[110,1392,1393],{"class":152},"error\n",[110,1395,1396],{"class":112,"line":443},[110,1397,1398],{"class":131},"}))\n",[110,1400,1401,1403,1405],{"class":112,"line":448},[110,1402,451],{"class":116},[110,1404,121],{"class":120},[110,1406,139],{"class":116},[110,1408,1409],{"class":112,"line":458},[110,1410,188],{"emptyLinePlaceholder":187},[110,1412,1413,1415,1417],{"class":112,"line":463},[110,1414,117],{"class":116},[110,1416,468],{"class":120},[110,1418,139],{"class":116},[110,1420,1421,1423,1425,1428,1430,1433],{"class":112,"line":473},[110,1422,476],{"class":116},[110,1424,479],{"class":120},[110,1426,1427],{"class":124}," class",[110,1429,132],{"class":131},[110,1431,1432],{"class":135},"\"form-field\"",[110,1434,139],{"class":116},[110,1436,1437,1439,1442,1444,1446,1449],{"class":112,"line":484},[110,1438,487],{"class":116},[110,1440,1441],{"class":120},"label",[110,1443,1427],{"class":124},[110,1445,132],{"class":131},[110,1447,1448],{"class":135},"\"block text-sm font-medium text-gray-700\"",[110,1450,139],{"class":116},[110,1452,1453,1456,1458],{"class":112,"line":509},[110,1454,1455],{"class":131},"      {{ ",[110,1457,1441],{"class":152},[110,1459,1460],{"class":131}," }}\n",[110,1462,1463,1466,1468],{"class":112,"line":532},[110,1464,1465],{"class":116},"    \u003C/",[110,1467,1441],{"class":120},[110,1469,139],{"class":116},[110,1471,1472,1474],{"class":112,"line":569},[110,1473,487],{"class":116},[110,1475,1476],{"class":120},"input\n",[110,1478,1479,1482,1484,1486,1488,1491],{"class":112,"line":579},[110,1480,1481],{"class":131},"      :",[110,1483,295],{"class":124},[110,1485,132],{"class":131},[110,1487,548],{"class":432},[110,1489,1490],{"class":152},"modelValue",[110,1492,1493],{"class":432},"\"\n",[110,1495,1496,1499,1502,1504,1506,1509,1511,1514,1516,1519,1521,1524,1526,1528,1530],{"class":112,"line":876},[110,1497,1498],{"class":131},"      @",[110,1500,1501],{"class":124},"input",[110,1503,132],{"class":131},[110,1505,548],{"class":432},[110,1507,1508],{"class":213},"$emit",[110,1510,217],{"class":131},[110,1512,1513],{"class":135},"'update:modelValue'",[110,1515,155],{"class":131},[110,1517,1518],{"class":152},"$event",[110,1520,292],{"class":131},[110,1522,1523],{"class":152},"target",[110,1525,292],{"class":131},[110,1527,295],{"class":152},[110,1529,72],{"class":131},[110,1531,1493],{"class":432},[110,1533,1534,1536,1539,1541,1543,1546],{"class":112,"line":884},[110,1535,1481],{"class":131},[110,1537,1538],{"class":124},"class",[110,1540,132],{"class":131},[110,1542,548],{"class":432},[110,1544,1545],{"class":152},"inputClasses",[110,1547,1493],{"class":432},[110,1549,1550,1553,1555],{"class":112,"line":892},[110,1551,1552],{"class":124},"      class",[110,1554,132],{"class":131},[110,1556,1557],{"class":135},"\"mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500\"\n",[110,1559,1560],{"class":112,"line":900},[110,1561,1562],{"class":116},"    />\n",[110,1564,1565,1567,1569,1572,1574,1576,1578,1580,1582,1584,1587],{"class":112,"line":906},[110,1566,487],{"class":116},[110,1568,11],{"class":120},[110,1570,1571],{"class":145}," v-if",[110,1573,132],{"class":131},[110,1575,548],{"class":432},[110,1577,1374],{"class":152},[110,1579,548],{"class":432},[110,1581,1427],{"class":124},[110,1583,132],{"class":131},[110,1585,1586],{"class":135},"\"mt-1 text-sm text-red-600\"",[110,1588,139],{"class":116},[110,1590,1591,1593,1595],{"class":112,"line":911},[110,1592,1455],{"class":131},[110,1594,1374],{"class":152},[110,1596,1460],{"class":131},[110,1598,1600,1602,1604],{"class":112,"line":1599},35,[110,1601,1465],{"class":116},[110,1603,11],{"class":120},[110,1605,139],{"class":116},[110,1607,1609,1611,1613],{"class":112,"line":1608},36,[110,1610,572],{"class":116},[110,1612,479],{"class":120},[110,1614,139],{"class":116},[110,1616,1618,1620,1622],{"class":112,"line":1617},37,[110,1619,451],{"class":116},[110,1621,468],{"class":120},[110,1623,139],{"class":116},[594,1625,1627],{"id":1626},"نمط-renderless-components","نمط Renderless Components",[101,1629,1631],{"className":103,"code":1630,"language":105,"meta":106,"style":106},"\u003C!-- components/MouseTracker.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst x = ref(0)\nconst y = ref(0)\n\nconst updateMouse = (event: MouseEvent) => {\n  x.value = event.clientX\n  y.value = event.clientY\n}\n\nonMounted(() => {\n  document.addEventListener('mousemove', updateMouse)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('mousemove', updateMouse)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cslot :x=\"x\" :y=\"y\" />\n\u003C/template>\n",[33,1632,1633,1638,1654,1678,1682,1699,1716,1720,1746,1765,1783,1787,1791,1801,1823,1827,1831,1841,1860,1864,1872,1876,1884,1924],{"__ignoreMap":106},[110,1634,1635],{"class":112,"line":113},[110,1636,1637],{"class":194},"\u003C!-- components/MouseTracker.vue -->\n",[110,1639,1640,1642,1644,1646,1648,1650,1652],{"class":112,"line":142},[110,1641,117],{"class":116},[110,1643,121],{"class":120},[110,1645,125],{"class":124},[110,1647,128],{"class":124},[110,1649,132],{"class":131},[110,1651,136],{"class":135},[110,1653,139],{"class":116},[110,1655,1656,1658,1660,1662,1664,1667,1669,1672,1674,1676],{"class":112,"line":184},[110,1657,146],{"class":145},[110,1659,149],{"class":131},[110,1661,45],{"class":152},[110,1663,155],{"class":131},[110,1665,1666],{"class":152},"onMounted",[110,1668,155],{"class":131},[110,1670,1671],{"class":152},"onUnmounted",[110,1673,172],{"class":131},[110,1675,175],{"class":145},[110,1677,644],{"class":135},[110,1679,1680],{"class":112,"line":191},[110,1681,188],{"emptyLinePlaceholder":187},[110,1683,1684,1686,1689,1691,1693,1695,1697],{"class":112,"line":198},[110,1685,202],{"class":201},[110,1687,1688],{"class":205}," x",[110,1690,210],{"class":209},[110,1692,214],{"class":213},[110,1694,217],{"class":131},[110,1696,221],{"class":220},[110,1698,699],{"class":131},[110,1700,1701,1703,1706,1708,1710,1712,1714],{"class":112,"line":227},[110,1702,202],{"class":201},[110,1704,1705],{"class":205}," y",[110,1707,210],{"class":209},[110,1709,214],{"class":213},[110,1711,217],{"class":131},[110,1713,221],{"class":220},[110,1715,699],{"class":131},[110,1717,1718],{"class":112,"line":260},[110,1719,188],{"emptyLinePlaceholder":187},[110,1721,1722,1724,1727,1729,1732,1735,1737,1740,1742,1744],{"class":112,"line":265},[110,1723,202],{"class":201},[110,1725,1726],{"class":213}," updateMouse",[110,1728,210],{"class":209},[110,1730,1731],{"class":131}," (",[110,1733,1734],{"class":330},"event",[110,1736,36],{"class":209},[110,1738,1739],{"class":1230}," MouseEvent",[110,1741,339],{"class":131},[110,1743,287],{"class":201},[110,1745,344],{"class":131},[110,1747,1748,1751,1753,1755,1757,1760,1762],{"class":112,"line":271},[110,1749,1750],{"class":152},"  x",[110,1752,292],{"class":131},[110,1754,295],{"class":152},[110,1756,210],{"class":209},[110,1758,1759],{"class":152}," event",[110,1761,292],{"class":131},[110,1763,1764],{"class":152},"clientX\n",[110,1766,1767,1770,1772,1774,1776,1778,1780],{"class":112,"line":306},[110,1768,1769],{"class":152},"  y",[110,1771,292],{"class":131},[110,1773,295],{"class":152},[110,1775,210],{"class":209},[110,1777,1759],{"class":152},[110,1779,292],{"class":131},[110,1781,1782],{"class":152},"clientY\n",[110,1784,1785],{"class":112,"line":311},[110,1786,1268],{"class":131},[110,1788,1789],{"class":112,"line":317},[110,1790,188],{"emptyLinePlaceholder":187},[110,1792,1793,1795,1797,1799],{"class":112,"line":347},[110,1794,1666],{"class":213},[110,1796,284],{"class":131},[110,1798,287],{"class":201},[110,1800,344],{"class":131},[110,1802,1803,1806,1808,1811,1813,1816,1818,1821],{"class":112,"line":386},[110,1804,1805],{"class":152},"  document",[110,1807,292],{"class":131},[110,1809,1810],{"class":213},"addEventListener",[110,1812,217],{"class":131},[110,1814,1815],{"class":135},"'mousemove'",[110,1817,155],{"class":131},[110,1819,1820],{"class":152},"updateMouse",[110,1822,699],{"class":131},[110,1824,1825],{"class":112,"line":392},[110,1826,914],{"class":131},[110,1828,1829],{"class":112,"line":397},[110,1830,188],{"emptyLinePlaceholder":187},[110,1832,1833,1835,1837,1839],{"class":112,"line":403},[110,1834,1671],{"class":213},[110,1836,284],{"class":131},[110,1838,287],{"class":201},[110,1840,344],{"class":131},[110,1842,1843,1845,1847,1850,1852,1854,1856,1858],{"class":112,"line":414},[110,1844,1805],{"class":152},[110,1846,292],{"class":131},[110,1848,1849],{"class":213},"removeEventListener",[110,1851,217],{"class":131},[110,1853,1815],{"class":135},[110,1855,155],{"class":131},[110,1857,1820],{"class":152},[110,1859,699],{"class":131},[110,1861,1862],{"class":112,"line":443},[110,1863,914],{"class":131},[110,1865,1866,1868,1870],{"class":112,"line":448},[110,1867,451],{"class":116},[110,1869,121],{"class":120},[110,1871,139],{"class":116},[110,1873,1874],{"class":112,"line":458},[110,1875,188],{"emptyLinePlaceholder":187},[110,1877,1878,1880,1882],{"class":112,"line":463},[110,1879,117],{"class":116},[110,1881,468],{"class":120},[110,1883,139],{"class":116},[110,1885,1886,1888,1891,1894,1897,1899,1901,1903,1905,1907,1910,1912,1914,1916,1918,1922],{"class":112,"line":473},[110,1887,476],{"class":116},[110,1889,1890],{"class":120},"slot",[110,1892,1893],{"class":131}," :",[110,1895,1896],{"class":124},"x",[110,1898,132],{"class":131},[110,1900,548],{"class":432},[110,1902,1896],{"class":152},[110,1904,548],{"class":432},[110,1906,1893],{"class":131},[110,1908,1909],{"class":124},"y",[110,1911,132],{"class":131},[110,1913,548],{"class":432},[110,1915,1909],{"class":152},[110,1917,548],{"class":432},[110,1919,1921],{"class":1920},"sUwQ0"," /",[110,1923,139],{"class":116},[110,1925,1926,1928,1930],{"class":112,"line":484},[110,1927,451],{"class":116},[110,1929,468],{"class":120},[110,1931,139],{"class":116},[15,1933,1935],{"id":1934},"_4-إدارة-دورة-الحياة-المتقدمة","4. إدارة دورة الحياة المتقدمة",[594,1937,1939],{"id":1938},"استخدام-composition-functions","استخدام Composition Functions",[101,1941,1943],{"className":600,"code":1942,"language":602,"meta":106,"style":106},"// composables/useLocalStorage.ts\nimport { ref, watch } from 'vue'\n\nexport function useLocalStorage\u003CT>(key: string, defaultValue: T) {\n  const value = ref\u003CT>(defaultValue)\n\n  // تحميل من localStorage\n  const stored = localStorage.getItem(key)\n  if (stored) {\n    try {\n      value.value = JSON.parse(stored)\n    } catch {\n      value.value = defaultValue\n    }\n  }\n\n  // حفظ في localStorage\n  watch(value, (newValue) => {\n    localStorage.setItem(key, JSON.stringify(newValue))\n  }, { deep: true })\n\n  return value\n}\n",[33,1944,1945,1950,1968,1972,2011,2032,2036,2041,2064,2076,2083,2108,2118,2131,2136,2140,2144,2149,2169,2200,2215,2219,2226],{"__ignoreMap":106},[110,1946,1947],{"class":112,"line":113},[110,1948,1949],{"class":194},"// composables/useLocalStorage.ts\n",[110,1951,1952,1954,1956,1958,1960,1962,1964,1966],{"class":112,"line":142},[110,1953,146],{"class":145},[110,1955,149],{"class":131},[110,1957,45],{"class":152},[110,1959,155],{"class":131},[110,1961,81],{"class":152},[110,1963,172],{"class":131},[110,1965,175],{"class":145},[110,1967,644],{"class":135},[110,1969,1970],{"class":112,"line":184},[110,1971,188],{"emptyLinePlaceholder":187},[110,1973,1974,1976,1979,1982,1984,1987,1990,1993,1995,1998,2000,2003,2005,2008],{"class":112,"line":191},[110,1975,653],{"class":145},[110,1977,1978],{"class":201}," function",[110,1980,1981],{"class":213}," useLocalStorage",[110,1983,117],{"class":131},[110,1985,1986],{"class":1230},"T",[110,1988,1989],{"class":131},">(",[110,1991,1992],{"class":330},"key",[110,1994,36],{"class":209},[110,1996,1997],{"class":1243}," string",[110,1999,155],{"class":131},[110,2001,2002],{"class":330},"defaultValue",[110,2004,36],{"class":209},[110,2006,2007],{"class":1230}," T",[110,2009,2010],{"class":131},") {\n",[110,2012,2013,2015,2018,2020,2022,2024,2026,2028,2030],{"class":112,"line":198},[110,2014,686],{"class":201},[110,2016,2017],{"class":205}," value",[110,2019,210],{"class":209},[110,2021,214],{"class":213},[110,2023,117],{"class":131},[110,2025,1986],{"class":1230},[110,2027,1989],{"class":131},[110,2029,2002],{"class":152},[110,2031,699],{"class":131},[110,2033,2034],{"class":112,"line":227},[110,2035,188],{"emptyLinePlaceholder":187},[110,2037,2038],{"class":112,"line":260},[110,2039,2040],{"class":194},"  // تحميل من localStorage\n",[110,2042,2043,2045,2048,2050,2053,2055,2058,2060,2062],{"class":112,"line":265},[110,2044,686],{"class":201},[110,2046,2047],{"class":205}," stored",[110,2049,210],{"class":209},[110,2051,2052],{"class":152}," localStorage",[110,2054,292],{"class":131},[110,2056,2057],{"class":213},"getItem",[110,2059,217],{"class":131},[110,2061,1992],{"class":152},[110,2063,699],{"class":131},[110,2065,2066,2069,2071,2074],{"class":112,"line":271},[110,2067,2068],{"class":145},"  if",[110,2070,1731],{"class":131},[110,2072,2073],{"class":152},"stored",[110,2075,2010],{"class":131},[110,2077,2078,2081],{"class":112,"line":306},[110,2079,2080],{"class":145},"    try",[110,2082,344],{"class":131},[110,2084,2085,2088,2090,2092,2094,2097,2099,2102,2104,2106],{"class":112,"line":311},[110,2086,2087],{"class":152},"      value",[110,2089,292],{"class":131},[110,2091,295],{"class":152},[110,2093,210],{"class":209},[110,2095,2096],{"class":205}," JSON",[110,2098,292],{"class":131},[110,2100,2101],{"class":213},"parse",[110,2103,217],{"class":131},[110,2105,2073],{"class":152},[110,2107,699],{"class":131},[110,2109,2110,2113,2116],{"class":112,"line":317},[110,2111,2112],{"class":131},"    } ",[110,2114,2115],{"class":145},"catch",[110,2117,344],{"class":131},[110,2119,2120,2122,2124,2126,2128],{"class":112,"line":347},[110,2121,2087],{"class":152},[110,2123,292],{"class":131},[110,2125,295],{"class":152},[110,2127,210],{"class":209},[110,2129,2130],{"class":152}," defaultValue\n",[110,2132,2133],{"class":112,"line":386},[110,2134,2135],{"class":131},"    }\n",[110,2137,2138],{"class":112,"line":392},[110,2139,790],{"class":131},[110,2141,2142],{"class":112,"line":397},[110,2143,188],{"emptyLinePlaceholder":187},[110,2145,2146],{"class":112,"line":403},[110,2147,2148],{"class":194},"  // حفظ في localStorage\n",[110,2150,2151,2154,2156,2158,2160,2163,2165,2167],{"class":112,"line":414},[110,2152,2153],{"class":213},"  watch",[110,2155,217],{"class":131},[110,2157,295],{"class":152},[110,2159,327],{"class":131},[110,2161,2162],{"class":330},"newValue",[110,2164,339],{"class":131},[110,2166,287],{"class":201},[110,2168,344],{"class":131},[110,2170,2171,2174,2176,2179,2181,2183,2185,2188,2190,2193,2195,2197],{"class":112,"line":443},[110,2172,2173],{"class":152},"    localStorage",[110,2175,292],{"class":131},[110,2177,2178],{"class":213},"setItem",[110,2180,217],{"class":131},[110,2182,1992],{"class":152},[110,2184,155],{"class":131},[110,2186,2187],{"class":205},"JSON",[110,2189,292],{"class":131},[110,2191,2192],{"class":213},"stringify",[110,2194,217],{"class":131},[110,2196,2162],{"class":152},[110,2198,2199],{"class":131},"))\n",[110,2201,2202,2205,2208,2212],{"class":112,"line":448},[110,2203,2204],{"class":131},"  }, { ",[110,2206,2207],{"class":152},"deep:",[110,2209,2211],{"class":2210},"s7v1m"," true",[110,2213,2214],{"class":131}," })\n",[110,2216,2217],{"class":112,"line":458},[110,2218,188],{"emptyLinePlaceholder":187},[110,2220,2221,2223],{"class":112,"line":463},[110,2222,857],{"class":145},[110,2224,2225],{"class":152}," value\n",[110,2227,2228],{"class":112,"line":473},[110,2229,1268],{"class":131},[594,2231,2233],{"id":2232},"إدارة-الذاكرة-والتنظيف","إدارة الذاكرة والتنظيف",[101,2235,2237],{"className":600,"code":2236,"language":602,"meta":106,"style":106},"// composables/useEventListener.ts\nimport { onMounted, onUnmounted } from 'vue'\n\nexport function useEventListener(\n  target: EventTarget,\n  event: string,\n  callback: EventListener\n) {\n  onMounted(() => {\n    target.addEventListener(event, callback)\n  })\n\n  onUnmounted(() => {\n    target.removeEventListener(event, callback)\n  })\n}\n",[33,2238,2239,2244,2262,2266,2278,2290,2301,2311,2315,2326,2346,2351,2355,2366,2384,2388],{"__ignoreMap":106},[110,2240,2241],{"class":112,"line":113},[110,2242,2243],{"class":194},"// composables/useEventListener.ts\n",[110,2245,2246,2248,2250,2252,2254,2256,2258,2260],{"class":112,"line":142},[110,2247,146],{"class":145},[110,2249,149],{"class":131},[110,2251,1666],{"class":152},[110,2253,155],{"class":131},[110,2255,1671],{"class":152},[110,2257,172],{"class":131},[110,2259,175],{"class":145},[110,2261,644],{"class":135},[110,2263,2264],{"class":112,"line":184},[110,2265,188],{"emptyLinePlaceholder":187},[110,2267,2268,2270,2272,2275],{"class":112,"line":191},[110,2269,653],{"class":145},[110,2271,1978],{"class":201},[110,2273,2274],{"class":213}," useEventListener",[110,2276,2277],{"class":131},"(\n",[110,2279,2280,2283,2285,2288],{"class":112,"line":198},[110,2281,2282],{"class":330},"  target",[110,2284,36],{"class":209},[110,2286,2287],{"class":1230}," EventTarget",[110,2289,866],{"class":131},[110,2291,2292,2295,2297,2299],{"class":112,"line":227},[110,2293,2294],{"class":330},"  event",[110,2296,36],{"class":209},[110,2298,1997],{"class":1243},[110,2300,866],{"class":131},[110,2302,2303,2306,2308],{"class":112,"line":260},[110,2304,2305],{"class":330},"  callback",[110,2307,36],{"class":209},[110,2309,2310],{"class":1230}," EventListener\n",[110,2312,2313],{"class":112,"line":265},[110,2314,2010],{"class":131},[110,2316,2317,2320,2322,2324],{"class":112,"line":271},[110,2318,2319],{"class":213},"  onMounted",[110,2321,284],{"class":131},[110,2323,287],{"class":201},[110,2325,344],{"class":131},[110,2327,2328,2331,2333,2335,2337,2339,2341,2344],{"class":112,"line":306},[110,2329,2330],{"class":152},"    target",[110,2332,292],{"class":131},[110,2334,1810],{"class":213},[110,2336,217],{"class":131},[110,2338,1734],{"class":152},[110,2340,155],{"class":131},[110,2342,2343],{"class":152},"callback",[110,2345,699],{"class":131},[110,2347,2348],{"class":112,"line":311},[110,2349,2350],{"class":131},"  })\n",[110,2352,2353],{"class":112,"line":317},[110,2354,188],{"emptyLinePlaceholder":187},[110,2356,2357,2360,2362,2364],{"class":112,"line":347},[110,2358,2359],{"class":213},"  onUnmounted",[110,2361,284],{"class":131},[110,2363,287],{"class":201},[110,2365,344],{"class":131},[110,2367,2368,2370,2372,2374,2376,2378,2380,2382],{"class":112,"line":386},[110,2369,2330],{"class":152},[110,2371,292],{"class":131},[110,2373,1849],{"class":213},[110,2375,217],{"class":131},[110,2377,1734],{"class":152},[110,2379,155],{"class":131},[110,2381,2343],{"class":152},[110,2383,699],{"class":131},[110,2385,2386],{"class":112,"line":392},[110,2387,2350],{"class":131},[110,2389,2390],{"class":112,"line":397},[110,2391,1268],{"class":131},[15,2393,2395],{"id":2394},"_5-تحسين-الأداء","5. تحسين الأداء",[594,2397,2399,2400,46,2403],{"id":2398},"استخدام-shallowref-و-shallowreactive","استخدام ",[33,2401,2402],{},"shallowRef",[33,2404,2405],{},"shallowReactive",[101,2407,2409],{"className":600,"code":2408,"language":602,"meta":106,"style":106},"import { shallowRef, shallowReactive } from 'vue'\n\n// للكائنات الكبيرة التي لا تحتاج تفاعل عميق\nconst largeObject = shallowReactive({ /* ... */ })\n\n// للمراجع التي تحتوي على كائنات\nconst data = shallowRef({ /* ... */ })\n",[33,2410,2411,2429,2433,2438,2457,2461,2466],{"__ignoreMap":106},[110,2412,2413,2415,2417,2419,2421,2423,2425,2427],{"class":112,"line":113},[110,2414,146],{"class":145},[110,2416,149],{"class":131},[110,2418,2402],{"class":152},[110,2420,155],{"class":131},[110,2422,2405],{"class":152},[110,2424,172],{"class":131},[110,2426,175],{"class":145},[110,2428,644],{"class":135},[110,2430,2431],{"class":112,"line":142},[110,2432,188],{"emptyLinePlaceholder":187},[110,2434,2435],{"class":112,"line":184},[110,2436,2437],{"class":194},"// للكائنات الكبيرة التي لا تحتاج تفاعل عميق\n",[110,2439,2440,2442,2445,2447,2450,2452,2455],{"class":112,"line":191},[110,2441,202],{"class":201},[110,2443,2444],{"class":205}," largeObject",[110,2446,210],{"class":209},[110,2448,2449],{"class":213}," shallowReactive",[110,2451,240],{"class":131},[110,2453,2454],{"class":194},"/* ... */",[110,2456,2214],{"class":131},[110,2458,2459],{"class":112,"line":198},[110,2460,188],{"emptyLinePlaceholder":187},[110,2462,2463],{"class":112,"line":227},[110,2464,2465],{"class":194},"// للمراجع التي تحتوي على كائنات\n",[110,2467,2468,2470,2473,2475,2478,2480,2482],{"class":112,"line":260},[110,2469,202],{"class":201},[110,2471,2472],{"class":205}," data",[110,2474,210],{"class":209},[110,2476,2477],{"class":213}," shallowRef",[110,2479,240],{"class":131},[110,2481,2454],{"class":194},[110,2483,2214],{"class":131},[594,2485,2487,2488],{"id":2486},"تحسين-العرض-مع-v-memo","تحسين العرض مع ",[33,2489,2490],{},"v-memo",[101,2492,2494],{"className":103,"code":2493,"language":105,"meta":106,"style":106},"\u003Ctemplate>\n  \u003Cdiv v-for=\"item in items\" :key=\"item.id\" v-memo=\"[item.id, item.updatedAt]\">\n    \u003C!-- محتوى المكون -->\n  \u003C/div>\n\u003C/template>\n",[33,2495,2496,2504,2577,2582,2590],{"__ignoreMap":106},[110,2497,2498,2500,2502],{"class":112,"line":113},[110,2499,117],{"class":116},[110,2501,468],{"class":120},[110,2503,139],{"class":116},[110,2505,2506,2508,2510,2513,2515,2517,2520,2523,2526,2528,2530,2532,2534,2536,2538,2540,2543,2545,2548,2550,2552,2555,2557,2559,2561,2563,2565,2567,2570,2573,2575],{"class":112,"line":142},[110,2507,476],{"class":116},[110,2509,479],{"class":120},[110,2511,2512],{"class":145}," v-for",[110,2514,132],{"class":131},[110,2516,548],{"class":432},[110,2518,2519],{"class":152},"item",[110,2521,2522],{"class":201}," in",[110,2524,2525],{"class":152}," items",[110,2527,548],{"class":432},[110,2529,1893],{"class":131},[110,2531,1992],{"class":124},[110,2533,132],{"class":131},[110,2535,548],{"class":432},[110,2537,2519],{"class":152},[110,2539,292],{"class":131},[110,2541,2542],{"class":152},"id",[110,2544,548],{"class":432},[110,2546,2547],{"class":124}," v-memo",[110,2549,132],{"class":131},[110,2551,548],{"class":432},[110,2553,2554],{"class":131},"[",[110,2556,2519],{"class":152},[110,2558,292],{"class":131},[110,2560,2542],{"class":152},[110,2562,155],{"class":131},[110,2564,2519],{"class":152},[110,2566,292],{"class":131},[110,2568,2569],{"class":152},"updatedAt",[110,2571,2572],{"class":131},"]",[110,2574,548],{"class":432},[110,2576,139],{"class":116},[110,2578,2579],{"class":112,"line":184},[110,2580,2581],{"class":194},"    \u003C!-- محتوى المكون -->\n",[110,2583,2584,2586,2588],{"class":112,"line":191},[110,2585,572],{"class":116},[110,2587,479],{"class":120},[110,2589,139],{"class":116},[110,2591,2592,2594,2596],{"class":112,"line":198},[110,2593,451],{"class":116},[110,2595,468],{"class":120},[110,2597,139],{"class":116},[594,2599,2399,2601,2604],{"id":2600},"استخدام-nexttick-بحكمة",[33,2602,2603],{},"nextTick"," بحكمة",[101,2606,2608],{"className":600,"code":2607,"language":602,"meta":106,"style":106},"import { nextTick } from 'vue'\n\nconst updateUI = async () => {\n  // تحديث البيانات\n  data.value = newData\n\n  // انتظار العرض\n  await nextTick()\n\n  // الآن يمكن الوصول إلى DOM المحدث\n  scrollToElement()\n}\n",[33,2609,2610,2624,2628,2647,2652,2666,2670,2675,2685,2689,2694,2701],{"__ignoreMap":106},[110,2611,2612,2614,2616,2618,2620,2622],{"class":112,"line":113},[110,2613,146],{"class":145},[110,2615,149],{"class":131},[110,2617,2603],{"class":152},[110,2619,172],{"class":131},[110,2621,175],{"class":145},[110,2623,644],{"class":135},[110,2625,2626],{"class":112,"line":142},[110,2627,188],{"emptyLinePlaceholder":187},[110,2629,2630,2632,2635,2637,2640,2643,2645],{"class":112,"line":184},[110,2631,202],{"class":201},[110,2633,2634],{"class":213}," updateUI",[110,2636,210],{"class":209},[110,2638,2639],{"class":201}," async",[110,2641,2642],{"class":131}," () ",[110,2644,287],{"class":201},[110,2646,344],{"class":131},[110,2648,2649],{"class":112,"line":191},[110,2650,2651],{"class":194},"  // تحديث البيانات\n",[110,2653,2654,2657,2659,2661,2663],{"class":112,"line":198},[110,2655,2656],{"class":152},"  data",[110,2658,292],{"class":131},[110,2660,295],{"class":152},[110,2662,210],{"class":209},[110,2664,2665],{"class":152}," newData\n",[110,2667,2668],{"class":112,"line":227},[110,2669,188],{"emptyLinePlaceholder":187},[110,2671,2672],{"class":112,"line":260},[110,2673,2674],{"class":194},"  // انتظار العرض\n",[110,2676,2677,2680,2683],{"class":112,"line":265},[110,2678,2679],{"class":145},"  await",[110,2681,2682],{"class":213}," nextTick",[110,2684,973],{"class":131},[110,2686,2687],{"class":112,"line":271},[110,2688,188],{"emptyLinePlaceholder":187},[110,2690,2691],{"class":112,"line":306},[110,2692,2693],{"class":194},"  // الآن يمكن الوصول إلى DOM المحدث\n",[110,2695,2696,2699],{"class":112,"line":311},[110,2697,2698],{"class":213},"  scrollToElement",[110,2700,973],{"class":131},[110,2702,2703],{"class":112,"line":317},[110,2704,1268],{"class":131},[15,2706,2708],{"id":2707},"_6-تكامل-typescript-المتقدم","6. تكامل TypeScript المتقدم",[594,2710,2712],{"id":2711},"واجهات-المكونات-المكتوبة","واجهات المكونات المكتوبة",[101,2714,2716],{"className":103,"code":2715,"language":105,"meta":106,"style":106},"\u003Cscript setup lang=\"ts\">\ninterface User {\n  id: number\n  name: string\n  email: string\n}\n\ninterface Props {\n  user: User\n  loading?: boolean\n}\n\ninterface Emits {\n  (e: 'update', user: User): void\n  (e: 'delete', id: number): void\n}\n\nconst props = defineProps\u003CProps>()\nconst emit = defineEmits\u003CEmits>()\n\u003C/script>\n",[33,2717,2718,2734,2743,2753,2762,2771,2775,2779,2787,2797,2807,2811,2815,2824,2853,2879,2883,2887,2903,2920],{"__ignoreMap":106},[110,2719,2720,2722,2724,2726,2728,2730,2732],{"class":112,"line":113},[110,2721,117],{"class":116},[110,2723,121],{"class":120},[110,2725,125],{"class":124},[110,2727,128],{"class":124},[110,2729,132],{"class":131},[110,2731,136],{"class":135},[110,2733,139],{"class":116},[110,2735,2736,2738,2741],{"class":112,"line":142},[110,2737,1227],{"class":201},[110,2739,2740],{"class":1230}," User",[110,2742,344],{"class":131},[110,2744,2745,2748,2750],{"class":112,"line":184},[110,2746,2747],{"class":330},"  id",[110,2749,36],{"class":209},[110,2751,2752],{"class":1243}," number\n",[110,2754,2755,2758,2760],{"class":112,"line":191},[110,2756,2757],{"class":330},"  name",[110,2759,36],{"class":209},[110,2761,1244],{"class":1243},[110,2763,2764,2767,2769],{"class":112,"line":198},[110,2765,2766],{"class":330},"  email",[110,2768,36],{"class":209},[110,2770,1244],{"class":1243},[110,2772,2773],{"class":112,"line":227},[110,2774,1268],{"class":131},[110,2776,2777],{"class":112,"line":260},[110,2778,188],{"emptyLinePlaceholder":187},[110,2780,2781,2783,2785],{"class":112,"line":265},[110,2782,1227],{"class":201},[110,2784,1231],{"class":1230},[110,2786,344],{"class":131},[110,2788,2789,2792,2794],{"class":112,"line":271},[110,2790,2791],{"class":330},"  user",[110,2793,36],{"class":209},[110,2795,2796],{"class":1230}," User\n",[110,2798,2799,2802,2804],{"class":112,"line":306},[110,2800,2801],{"class":330},"  loading",[110,2803,1261],{"class":209},[110,2805,2806],{"class":1243}," boolean\n",[110,2808,2809],{"class":112,"line":311},[110,2810,1268],{"class":131},[110,2812,2813],{"class":112,"line":317},[110,2814,188],{"emptyLinePlaceholder":187},[110,2816,2817,2819,2822],{"class":112,"line":347},[110,2818,1227],{"class":201},[110,2820,2821],{"class":1230}," Emits",[110,2823,344],{"class":131},[110,2825,2826,2829,2832,2834,2837,2839,2842,2844,2846,2848,2850],{"class":112,"line":386},[110,2827,2828],{"class":131},"  (",[110,2830,2831],{"class":330},"e",[110,2833,36],{"class":209},[110,2835,2836],{"class":135}," 'update'",[110,2838,155],{"class":131},[110,2840,2841],{"class":330},"user",[110,2843,36],{"class":209},[110,2845,2740],{"class":1230},[110,2847,72],{"class":131},[110,2849,36],{"class":209},[110,2851,2852],{"class":1243}," void\n",[110,2854,2855,2857,2859,2861,2864,2866,2868,2870,2873,2875,2877],{"class":112,"line":392},[110,2856,2828],{"class":131},[110,2858,2831],{"class":330},[110,2860,36],{"class":209},[110,2862,2863],{"class":135}," 'delete'",[110,2865,155],{"class":131},[110,2867,2542],{"class":330},[110,2869,36],{"class":209},[110,2871,2872],{"class":1243}," number",[110,2874,72],{"class":131},[110,2876,36],{"class":209},[110,2878,2852],{"class":1243},[110,2880,2881],{"class":112,"line":397},[110,2882,1268],{"class":131},[110,2884,2885],{"class":112,"line":403},[110,2886,188],{"emptyLinePlaceholder":187},[110,2888,2889,2891,2893,2895,2897,2899,2901],{"class":112,"line":414},[110,2890,202],{"class":201},[110,2892,1279],{"class":205},[110,2894,210],{"class":209},[110,2896,1284],{"class":213},[110,2898,117],{"class":131},[110,2900,1289],{"class":1230},[110,2902,1292],{"class":131},[110,2904,2905,2907,2909,2911,2913,2915,2918],{"class":112,"line":443},[110,2906,202],{"class":201},[110,2908,1299],{"class":205},[110,2910,210],{"class":209},[110,2912,1304],{"class":213},[110,2914,117],{"class":131},[110,2916,2917],{"class":1230},"Emits",[110,2919,1292],{"class":131},[110,2921,2922,2924,2926],{"class":112,"line":448},[110,2923,451],{"class":116},[110,2925,121],{"class":120},[110,2927,139],{"class":116},[594,2929,2931],{"id":2930},"أنواع-pinia-المكتوبة","أنواع Pinia المكتوبة",[101,2933,2935],{"className":600,"code":2934,"language":602,"meta":106,"style":106},"// stores/user.ts\nimport { defineStore } from 'pinia'\nimport { ref } from 'vue'\n\ninterface User {\n  id: number\n  name: string\n  email: string\n}\n\nexport const useUserStore = defineStore('user', () => {\n  const currentUser = ref\u003CUser | null>(null)\n  const users = ref\u003CUser[]>([])\n\n  const setCurrentUser = (user: User) => {\n    currentUser.value = user\n  }\n\n  const addUser = (user: User) => {\n    users.value.push(user)\n  }\n\n  return {\n    currentUser,\n    users,\n    setCurrentUser,\n    addUser\n  }\n})\n",[33,2936,2937,2942,2956,2970,2974,2982,2990,2998,3006,3010,3014,3038,3067,3085,3089,3112,3126,3130,3134,3157,3177,3181,3185,3191,3197,3203,3210,3215,3219],{"__ignoreMap":106},[110,2938,2939],{"class":112,"line":113},[110,2940,2941],{"class":194},"// stores/user.ts\n",[110,2943,2944,2946,2948,2950,2952,2954],{"class":112,"line":142},[110,2945,146],{"class":145},[110,2947,149],{"class":131},[110,2949,618],{"class":152},[110,2951,172],{"class":131},[110,2953,175],{"class":145},[110,2955,625],{"class":135},[110,2957,2958,2960,2962,2964,2966,2968],{"class":112,"line":184},[110,2959,146],{"class":145},[110,2961,149],{"class":131},[110,2963,45],{"class":152},[110,2965,172],{"class":131},[110,2967,175],{"class":145},[110,2969,644],{"class":135},[110,2971,2972],{"class":112,"line":191},[110,2973,188],{"emptyLinePlaceholder":187},[110,2975,2976,2978,2980],{"class":112,"line":198},[110,2977,1227],{"class":201},[110,2979,2740],{"class":1230},[110,2981,344],{"class":131},[110,2983,2984,2986,2988],{"class":112,"line":227},[110,2985,2747],{"class":330},[110,2987,36],{"class":209},[110,2989,2752],{"class":1243},[110,2991,2992,2994,2996],{"class":112,"line":260},[110,2993,2757],{"class":330},[110,2995,36],{"class":209},[110,2997,1244],{"class":1243},[110,2999,3000,3002,3004],{"class":112,"line":265},[110,3001,2766],{"class":330},[110,3003,36],{"class":209},[110,3005,1244],{"class":1243},[110,3007,3008],{"class":112,"line":271},[110,3009,1268],{"class":131},[110,3011,3012],{"class":112,"line":306},[110,3013,188],{"emptyLinePlaceholder":187},[110,3015,3016,3018,3020,3023,3025,3027,3029,3032,3034,3036],{"class":112,"line":311},[110,3017,653],{"class":145},[110,3019,656],{"class":201},[110,3021,3022],{"class":205}," useUserStore",[110,3024,210],{"class":209},[110,3026,664],{"class":213},[110,3028,217],{"class":131},[110,3030,3031],{"class":135},"'user'",[110,3033,672],{"class":131},[110,3035,287],{"class":201},[110,3037,344],{"class":131},[110,3039,3040,3042,3045,3047,3049,3051,3054,3057,3060,3062,3065],{"class":112,"line":317},[110,3041,686],{"class":201},[110,3043,3044],{"class":205}," currentUser",[110,3046,210],{"class":209},[110,3048,214],{"class":213},[110,3050,117],{"class":131},[110,3052,3053],{"class":1230},"User",[110,3055,3056],{"class":209}," |",[110,3058,3059],{"class":1243}," null",[110,3061,1989],{"class":131},[110,3063,3064],{"class":2210},"null",[110,3066,699],{"class":131},[110,3068,3069,3071,3074,3076,3078,3080,3082],{"class":112,"line":347},[110,3070,686],{"class":201},[110,3072,3073],{"class":205}," users",[110,3075,210],{"class":209},[110,3077,214],{"class":213},[110,3079,117],{"class":131},[110,3081,3053],{"class":1230},[110,3083,3084],{"class":131},"[]>([])\n",[110,3086,3087],{"class":112,"line":386},[110,3088,188],{"emptyLinePlaceholder":187},[110,3090,3091,3093,3096,3098,3100,3102,3104,3106,3108,3110],{"class":112,"line":392},[110,3092,686],{"class":201},[110,3094,3095],{"class":213}," setCurrentUser",[110,3097,210],{"class":209},[110,3099,1731],{"class":131},[110,3101,2841],{"class":330},[110,3103,36],{"class":209},[110,3105,2740],{"class":1230},[110,3107,339],{"class":131},[110,3109,287],{"class":201},[110,3111,344],{"class":131},[110,3113,3114,3117,3119,3121,3123],{"class":112,"line":397},[110,3115,3116],{"class":152},"    currentUser",[110,3118,292],{"class":131},[110,3120,295],{"class":152},[110,3122,210],{"class":209},[110,3124,3125],{"class":152}," user\n",[110,3127,3128],{"class":112,"line":403},[110,3129,790],{"class":131},[110,3131,3132],{"class":112,"line":414},[110,3133,188],{"emptyLinePlaceholder":187},[110,3135,3136,3138,3141,3143,3145,3147,3149,3151,3153,3155],{"class":112,"line":443},[110,3137,686],{"class":201},[110,3139,3140],{"class":213}," addUser",[110,3142,210],{"class":209},[110,3144,1731],{"class":131},[110,3146,2841],{"class":330},[110,3148,36],{"class":209},[110,3150,2740],{"class":1230},[110,3152,339],{"class":131},[110,3154,287],{"class":201},[110,3156,344],{"class":131},[110,3158,3159,3162,3164,3166,3168,3171,3173,3175],{"class":112,"line":448},[110,3160,3161],{"class":152},"    users",[110,3163,292],{"class":131},[110,3165,295],{"class":152},[110,3167,292],{"class":131},[110,3169,3170],{"class":213},"push",[110,3172,217],{"class":131},[110,3174,2841],{"class":152},[110,3176,699],{"class":131},[110,3178,3179],{"class":112,"line":458},[110,3180,790],{"class":131},[110,3182,3183],{"class":112,"line":463},[110,3184,188],{"emptyLinePlaceholder":187},[110,3186,3187,3189],{"class":112,"line":473},[110,3188,857],{"class":145},[110,3190,344],{"class":131},[110,3192,3193,3195],{"class":112,"line":484},[110,3194,3116],{"class":152},[110,3196,866],{"class":131},[110,3198,3199,3201],{"class":112,"line":509},[110,3200,3161],{"class":152},[110,3202,866],{"class":131},[110,3204,3205,3208],{"class":112,"line":532},[110,3206,3207],{"class":152},"    setCurrentUser",[110,3209,866],{"class":131},[110,3211,3212],{"class":112,"line":569},[110,3213,3214],{"class":152},"    addUser\n",[110,3216,3217],{"class":112,"line":579},[110,3218,790],{"class":131},[110,3220,3221],{"class":112,"line":876},[110,3222,914],{"class":131},[15,3224,3226],{"id":3225},"_7-أنماط-الاختبار","7. أنماط الاختبار",[594,3228,3230],{"id":3229},"اختبار-المكونات-مع-vue-test-utils","اختبار المكونات مع Vue Test Utils",[101,3232,3234],{"className":600,"code":3233,"language":602,"meta":106,"style":106},"// tests/components/Counter.test.ts\nimport { describe, it, expect } from 'vitest'\nimport { mount } from '@vue/test-utils'\nimport Counter from '@/components/Counter.vue'\n\ndescribe('Counter', () => {\n  it('increments count when button is clicked', async () => {\n    const wrapper = mount(Counter)\n    const button = wrapper.find('button')\n\n    await button.trigger('click')\n\n    expect(wrapper.text()).toContain('1')\n  })\n})\n",[33,3235,3236,3241,3267,3283,3296,3300,3314,3335,3355,3378,3382,3401,3405,3433,3437],{"__ignoreMap":106},[110,3237,3238],{"class":112,"line":113},[110,3239,3240],{"class":194},"// tests/components/Counter.test.ts\n",[110,3242,3243,3245,3247,3250,3252,3255,3257,3260,3262,3264],{"class":112,"line":142},[110,3244,146],{"class":145},[110,3246,149],{"class":131},[110,3248,3249],{"class":152},"describe",[110,3251,155],{"class":131},[110,3253,3254],{"class":152},"it",[110,3256,155],{"class":131},[110,3258,3259],{"class":152},"expect",[110,3261,172],{"class":131},[110,3263,175],{"class":145},[110,3265,3266],{"class":135}," 'vitest'\n",[110,3268,3269,3271,3273,3276,3278,3280],{"class":112,"line":184},[110,3270,146],{"class":145},[110,3272,149],{"class":131},[110,3274,3275],{"class":152},"mount",[110,3277,172],{"class":131},[110,3279,175],{"class":145},[110,3281,3282],{"class":135}," '@vue/test-utils'\n",[110,3284,3285,3287,3290,3293],{"class":112,"line":191},[110,3286,146],{"class":145},[110,3288,3289],{"class":152}," Counter",[110,3291,3292],{"class":145}," from",[110,3294,3295],{"class":135}," '@/components/Counter.vue'\n",[110,3297,3298],{"class":112,"line":198},[110,3299,188],{"emptyLinePlaceholder":187},[110,3301,3302,3304,3306,3308,3310,3312],{"class":112,"line":227},[110,3303,3249],{"class":213},[110,3305,217],{"class":131},[110,3307,715],{"class":135},[110,3309,672],{"class":131},[110,3311,287],{"class":201},[110,3313,344],{"class":131},[110,3315,3316,3319,3321,3324,3326,3329,3331,3333],{"class":112,"line":260},[110,3317,3318],{"class":213},"  it",[110,3320,217],{"class":131},[110,3322,3323],{"class":135},"'increments count when button is clicked'",[110,3325,155],{"class":131},[110,3327,3328],{"class":201},"async",[110,3330,2642],{"class":131},[110,3332,287],{"class":201},[110,3334,344],{"class":131},[110,3336,3337,3340,3343,3345,3348,3350,3353],{"class":112,"line":265},[110,3338,3339],{"class":201},"    const",[110,3341,3342],{"class":205}," wrapper",[110,3344,210],{"class":209},[110,3346,3347],{"class":213}," mount",[110,3349,217],{"class":131},[110,3351,3352],{"class":152},"Counter",[110,3354,699],{"class":131},[110,3356,3357,3359,3362,3364,3366,3368,3371,3373,3376],{"class":112,"line":271},[110,3358,3339],{"class":201},[110,3360,3361],{"class":205}," button",[110,3363,210],{"class":209},[110,3365,3342],{"class":152},[110,3367,292],{"class":131},[110,3369,3370],{"class":213},"find",[110,3372,217],{"class":131},[110,3374,3375],{"class":135},"'button'",[110,3377,699],{"class":131},[110,3379,3380],{"class":112,"line":306},[110,3381,188],{"emptyLinePlaceholder":187},[110,3383,3384,3387,3389,3391,3394,3396,3399],{"class":112,"line":311},[110,3385,3386],{"class":145},"    await",[110,3388,3361],{"class":152},[110,3390,292],{"class":131},[110,3392,3393],{"class":213},"trigger",[110,3395,217],{"class":131},[110,3397,3398],{"class":135},"'click'",[110,3400,699],{"class":131},[110,3402,3403],{"class":112,"line":317},[110,3404,188],{"emptyLinePlaceholder":187},[110,3406,3407,3410,3412,3415,3417,3420,3423,3426,3428,3431],{"class":112,"line":347},[110,3408,3409],{"class":213},"    expect",[110,3411,217],{"class":131},[110,3413,3414],{"class":152},"wrapper",[110,3416,292],{"class":131},[110,3418,3419],{"class":213},"text",[110,3421,3422],{"class":131},"()).",[110,3424,3425],{"class":213},"toContain",[110,3427,217],{"class":131},[110,3429,3430],{"class":135},"'1'",[110,3432,699],{"class":131},[110,3434,3435],{"class":112,"line":386},[110,3436,2350],{"class":131},[110,3438,3439],{"class":112,"line":392},[110,3440,914],{"class":131},[594,3442,3444],{"id":3443},"اختبار-composables","اختبار Composables",[101,3446,3448],{"className":600,"code":3447,"language":602,"meta":106,"style":106},"// tests/composables/useCounter.test.ts\nimport { describe, it, expect } from 'vitest'\nimport { useCounter } from '@/composables/useCounter'\n\ndescribe('useCounter', () => {\n  it('increments count', () => {\n    const { count, increment } = useCounter()\n\n    increment()\n\n    expect(count.value).toBe(1)\n  })\n})\n",[33,3449,3450,3455,3477,3493,3497,3512,3527,3548,3552,3558,3562,3587,3591],{"__ignoreMap":106},[110,3451,3452],{"class":112,"line":113},[110,3453,3454],{"class":194},"// tests/composables/useCounter.test.ts\n",[110,3456,3457,3459,3461,3463,3465,3467,3469,3471,3473,3475],{"class":112,"line":142},[110,3458,146],{"class":145},[110,3460,149],{"class":131},[110,3462,3249],{"class":152},[110,3464,155],{"class":131},[110,3466,3254],{"class":152},[110,3468,155],{"class":131},[110,3470,3259],{"class":152},[110,3472,172],{"class":131},[110,3474,175],{"class":145},[110,3476,3266],{"class":135},[110,3478,3479,3481,3483,3486,3488,3490],{"class":112,"line":184},[110,3480,146],{"class":145},[110,3482,149],{"class":131},[110,3484,3485],{"class":152},"useCounter",[110,3487,172],{"class":131},[110,3489,175],{"class":145},[110,3491,3492],{"class":135}," '@/composables/useCounter'\n",[110,3494,3495],{"class":112,"line":191},[110,3496,188],{"emptyLinePlaceholder":187},[110,3498,3499,3501,3503,3506,3508,3510],{"class":112,"line":198},[110,3500,3249],{"class":213},[110,3502,217],{"class":131},[110,3504,3505],{"class":135},"'useCounter'",[110,3507,672],{"class":131},[110,3509,287],{"class":201},[110,3511,344],{"class":131},[110,3513,3514,3516,3518,3521,3523,3525],{"class":112,"line":227},[110,3515,3318],{"class":213},[110,3517,217],{"class":131},[110,3519,3520],{"class":135},"'increments count'",[110,3522,672],{"class":131},[110,3524,287],{"class":201},[110,3526,344],{"class":131},[110,3528,3529,3531,3533,3535,3537,3539,3541,3543,3546],{"class":112,"line":260},[110,3530,3339],{"class":201},[110,3532,149],{"class":131},[110,3534,324],{"class":205},[110,3536,155],{"class":131},[110,3538,1073],{"class":205},[110,3540,172],{"class":131},[110,3542,132],{"class":209},[110,3544,3545],{"class":213}," useCounter",[110,3547,973],{"class":131},[110,3549,3550],{"class":112,"line":265},[110,3551,188],{"emptyLinePlaceholder":187},[110,3553,3554,3556],{"class":112,"line":271},[110,3555,887],{"class":213},[110,3557,973],{"class":131},[110,3559,3560],{"class":112,"line":306},[110,3561,188],{"emptyLinePlaceholder":187},[110,3563,3564,3566,3568,3570,3572,3574,3577,3580,3582,3585],{"class":112,"line":311},[110,3565,3409],{"class":213},[110,3567,217],{"class":131},[110,3569,324],{"class":152},[110,3571,292],{"class":131},[110,3573,295],{"class":152},[110,3575,3576],{"class":131},").",[110,3578,3579],{"class":213},"toBe",[110,3581,217],{"class":131},[110,3583,3584],{"class":220},"1",[110,3586,699],{"class":131},[110,3588,3589],{"class":112,"line":317},[110,3590,2350],{"class":131},[110,3592,3593],{"class":112,"line":347},[110,3594,914],{"class":131},[15,3596,3598],{"id":3597},"_8-أنماط-الهيكلة","8. أنماط الهيكلة",[594,3600,3602],{"id":3601},"هيكل-المشروع-الموصى-به","هيكل المشروع الموصى به",[101,3604,3608],{"className":3605,"code":3607,"language":3419},[3606],"language-text","src/\n├── components/\n│   ├── ui/           # مكونات UI الأساسية\n│   ├── forms/        # مكونات النماذج\n│   └── layouts/      # مكونات التخطيط\n├── composables/      # دوال التكوين\n├── stores/          # مخازن Pinia\n├── types/           # أنواع TypeScript\n├── utils/           # دوال المساعدة\n└── views/           # صفحات التطبيق\n",[33,3609,3607],{"__ignoreMap":106},[594,3611,3613],{"id":3612},"نمط-الميزات-feature-based-structure","نمط الميزات (Feature-based structure)",[101,3615,3618],{"className":3616,"code":3617,"language":3419},[3606],"src/\n├── features/\n│   ├── auth/\n│   │   ├── components/\n│   │   ├── composables/\n│   │   ├── stores/\n│   │   └── types/\n│   └── dashboard/\n│       ├── components/\n│       ├── composables/\n│       ├── stores/\n│       └── types/\n",[33,3619,3617],{"__ignoreMap":106},[15,3621,3623],{"id":3622},"_9-معالجة-الأخطاء-والاستثناءات","9. معالجة الأخطاء والاستثناءات",[594,3625,3627],{"id":3626},"استخدام-error-boundaries","استخدام Error Boundaries",[101,3629,3631],{"className":103,"code":3630,"language":105,"meta":106,"style":106},"\u003C!-- components/ErrorBoundary.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst error = ref\u003CError | null>(null)\n\nconst handleError = (err: Error) => {\n  error.value = err\n  // تسجيل الخطأ أو إرساله إلى خدمة التتبع\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"error\" class=\"error-boundary\">\n    \u003Ch2>حدث خطأ غير متوقع\u003C/h2>\n    \u003Cp>{{ error.message }}\u003C/p>\n    \u003Cbutton @click=\"error = null\">إعادة المحاولة\u003C/button>\n  \u003C/div>\n  \u003Cslot v-else />\n\u003C/template>\n",[33,3632,3633,3638,3654,3668,3672,3698,3702,3727,3740,3745,3749,3757,3761,3769,3794,3811,3837,3870,3878,3891],{"__ignoreMap":106},[110,3634,3635],{"class":112,"line":113},[110,3636,3637],{"class":194},"\u003C!-- components/ErrorBoundary.vue -->\n",[110,3639,3640,3642,3644,3646,3648,3650,3652],{"class":112,"line":142},[110,3641,117],{"class":116},[110,3643,121],{"class":120},[110,3645,125],{"class":124},[110,3647,128],{"class":124},[110,3649,132],{"class":131},[110,3651,136],{"class":135},[110,3653,139],{"class":116},[110,3655,3656,3658,3660,3662,3664,3666],{"class":112,"line":184},[110,3657,146],{"class":145},[110,3659,149],{"class":131},[110,3661,45],{"class":152},[110,3663,172],{"class":131},[110,3665,175],{"class":145},[110,3667,644],{"class":135},[110,3669,3670],{"class":112,"line":191},[110,3671,188],{"emptyLinePlaceholder":187},[110,3673,3674,3676,3679,3681,3683,3685,3688,3690,3692,3694,3696],{"class":112,"line":198},[110,3675,202],{"class":201},[110,3677,3678],{"class":205}," error",[110,3680,210],{"class":209},[110,3682,214],{"class":213},[110,3684,117],{"class":131},[110,3686,3687],{"class":1230},"Error",[110,3689,3056],{"class":209},[110,3691,3059],{"class":1243},[110,3693,1989],{"class":131},[110,3695,3064],{"class":2210},[110,3697,699],{"class":131},[110,3699,3700],{"class":112,"line":227},[110,3701,188],{"emptyLinePlaceholder":187},[110,3703,3704,3706,3709,3711,3713,3716,3718,3721,3723,3725],{"class":112,"line":260},[110,3705,202],{"class":201},[110,3707,3708],{"class":213}," handleError",[110,3710,210],{"class":209},[110,3712,1731],{"class":131},[110,3714,3715],{"class":330},"err",[110,3717,36],{"class":209},[110,3719,3720],{"class":1230}," Error",[110,3722,339],{"class":131},[110,3724,287],{"class":201},[110,3726,344],{"class":131},[110,3728,3729,3731,3733,3735,3737],{"class":112,"line":265},[110,3730,1258],{"class":152},[110,3732,292],{"class":131},[110,3734,295],{"class":152},[110,3736,210],{"class":209},[110,3738,3739],{"class":152}," err\n",[110,3741,3742],{"class":112,"line":271},[110,3743,3744],{"class":194},"  // تسجيل الخطأ أو إرساله إلى خدمة التتبع\n",[110,3746,3747],{"class":112,"line":306},[110,3748,1268],{"class":131},[110,3750,3751,3753,3755],{"class":112,"line":311},[110,3752,451],{"class":116},[110,3754,121],{"class":120},[110,3756,139],{"class":116},[110,3758,3759],{"class":112,"line":317},[110,3760,188],{"emptyLinePlaceholder":187},[110,3762,3763,3765,3767],{"class":112,"line":347},[110,3764,117],{"class":116},[110,3766,468],{"class":120},[110,3768,139],{"class":116},[110,3770,3771,3773,3775,3777,3779,3781,3783,3785,3787,3789,3792],{"class":112,"line":386},[110,3772,476],{"class":116},[110,3774,479],{"class":120},[110,3776,1571],{"class":145},[110,3778,132],{"class":131},[110,3780,548],{"class":432},[110,3782,1374],{"class":152},[110,3784,548],{"class":432},[110,3786,1427],{"class":124},[110,3788,132],{"class":131},[110,3790,3791],{"class":135},"\"error-boundary\"",[110,3793,139],{"class":116},[110,3795,3796,3798,3800,3802,3805,3807,3809],{"class":112,"line":392},[110,3797,487],{"class":116},[110,3799,15],{"class":120},[110,3801,492],{"class":116},[110,3803,3804],{"class":131},"حدث خطأ غير متوقع",[110,3806,451],{"class":116},[110,3808,15],{"class":120},[110,3810,139],{"class":116},[110,3812,3813,3815,3817,3819,3822,3824,3826,3829,3831,3833,3835],{"class":112,"line":397},[110,3814,487],{"class":116},[110,3816,11],{"class":120},[110,3818,492],{"class":116},[110,3820,3821],{"class":131},"{{ ",[110,3823,1374],{"class":152},[110,3825,292],{"class":131},[110,3827,3828],{"class":152},"message",[110,3830,500],{"class":131},[110,3832,451],{"class":116},[110,3834,11],{"class":120},[110,3836,139],{"class":116},[110,3838,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861,3864,3866,3868],{"class":112,"line":403},[110,3840,487],{"class":116},[110,3842,537],{"class":120},[110,3844,540],{"class":131},[110,3846,543],{"class":124},[110,3848,132],{"class":131},[110,3850,548],{"class":432},[110,3852,1374],{"class":152},[110,3854,210],{"class":209},[110,3856,3059],{"class":2210},[110,3858,548],{"class":432},[110,3860,492],{"class":116},[110,3862,3863],{"class":131},"إعادة المحاولة",[110,3865,451],{"class":116},[110,3867,537],{"class":120},[110,3869,139],{"class":116},[110,3871,3872,3874,3876],{"class":112,"line":414},[110,3873,572],{"class":116},[110,3875,479],{"class":120},[110,3877,139],{"class":116},[110,3879,3880,3882,3884,3887,3889],{"class":112,"line":443},[110,3881,476],{"class":116},[110,3883,1890],{"class":120},[110,3885,3886],{"class":145}," v-else",[110,3888,1921],{"class":1920},[110,3890,139],{"class":116},[110,3892,3893,3895,3897],{"class":112,"line":448},[110,3894,451],{"class":116},[110,3896,468],{"class":120},[110,3898,139],{"class":116},[594,3900,3902],{"id":3901},"معالجة-الأخطاء-في-composables","معالجة الأخطاء في Composables",[101,3904,3906],{"className":600,"code":3905,"language":602,"meta":106,"style":106},"// composables/useAsyncData.ts\nimport { ref, computed } from 'vue'\n\nexport function useAsyncData\u003CT>(fetcher: () => Promise\u003CT>) {\n  const data = ref\u003CT | null>(null)\n  const loading = ref(false)\n  const error = ref\u003Cstring | null>(null)\n\n  const execute = async () => {\n    loading.value = true\n    error.value = null\n\n    try {\n      data.value = await fetcher()\n    } catch (err) {\n      error.value = err instanceof Error ? err.message : 'حدث خطأ غير معروف'\n    } finally {\n      loading.value = false\n    }\n  }\n\n  return {\n    data: computed(() => data.value),\n    loading: computed(() => loading.value),\n    error: computed(() => error.value),\n    execute\n  }\n}\n",[33,3907,3908,3913,3931,3935,3969,3993,4011,4035,4039,4056,4070,4084,4088,4094,4113,4125,4158,4167,4181,4185,4189,4193,4199,4219,4238,4257,4262,4266],{"__ignoreMap":106},[110,3909,3910],{"class":112,"line":113},[110,3911,3912],{"class":194},"// composables/useAsyncData.ts\n",[110,3914,3915,3917,3919,3921,3923,3925,3927,3929],{"class":112,"line":142},[110,3916,146],{"class":145},[110,3918,149],{"class":131},[110,3920,45],{"class":152},[110,3922,155],{"class":131},[110,3924,71],{"class":152},[110,3926,172],{"class":131},[110,3928,175],{"class":145},[110,3930,644],{"class":135},[110,3932,3933],{"class":112,"line":184},[110,3934,188],{"emptyLinePlaceholder":187},[110,3936,3937,3939,3941,3944,3946,3948,3950,3953,3955,3957,3959,3962,3964,3966],{"class":112,"line":191},[110,3938,653],{"class":145},[110,3940,1978],{"class":201},[110,3942,3943],{"class":213}," useAsyncData",[110,3945,117],{"class":131},[110,3947,1986],{"class":1230},[110,3949,1989],{"class":131},[110,3951,3952],{"class":213},"fetcher",[110,3954,36],{"class":209},[110,3956,2642],{"class":131},[110,3958,287],{"class":201},[110,3960,3961],{"class":1230}," Promise",[110,3963,117],{"class":131},[110,3965,1986],{"class":1230},[110,3967,3968],{"class":131},">) {\n",[110,3970,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991],{"class":112,"line":198},[110,3972,686],{"class":201},[110,3974,2472],{"class":205},[110,3976,210],{"class":209},[110,3978,214],{"class":213},[110,3980,117],{"class":131},[110,3982,1986],{"class":1230},[110,3984,3056],{"class":209},[110,3986,3059],{"class":1243},[110,3988,1989],{"class":131},[110,3990,3064],{"class":2210},[110,3992,699],{"class":131},[110,3994,3995,3997,4000,4002,4004,4006,4009],{"class":112,"line":227},[110,3996,686],{"class":201},[110,3998,3999],{"class":205}," loading",[110,4001,210],{"class":209},[110,4003,214],{"class":213},[110,4005,217],{"class":131},[110,4007,4008],{"class":2210},"false",[110,4010,699],{"class":131},[110,4012,4013,4015,4017,4019,4021,4023,4025,4027,4029,4031,4033],{"class":112,"line":260},[110,4014,686],{"class":201},[110,4016,3678],{"class":205},[110,4018,210],{"class":209},[110,4020,214],{"class":213},[110,4022,117],{"class":131},[110,4024,1326],{"class":1243},[110,4026,3056],{"class":209},[110,4028,3059],{"class":1243},[110,4030,1989],{"class":131},[110,4032,3064],{"class":2210},[110,4034,699],{"class":131},[110,4036,4037],{"class":112,"line":265},[110,4038,188],{"emptyLinePlaceholder":187},[110,4040,4041,4043,4046,4048,4050,4052,4054],{"class":112,"line":271},[110,4042,686],{"class":201},[110,4044,4045],{"class":213}," execute",[110,4047,210],{"class":209},[110,4049,2639],{"class":201},[110,4051,2642],{"class":131},[110,4053,287],{"class":201},[110,4055,344],{"class":131},[110,4057,4058,4061,4063,4065,4067],{"class":112,"line":306},[110,4059,4060],{"class":152},"    loading",[110,4062,292],{"class":131},[110,4064,295],{"class":152},[110,4066,210],{"class":209},[110,4068,4069],{"class":2210}," true\n",[110,4071,4072,4075,4077,4079,4081],{"class":112,"line":311},[110,4073,4074],{"class":152},"    error",[110,4076,292],{"class":131},[110,4078,295],{"class":152},[110,4080,210],{"class":209},[110,4082,4083],{"class":2210}," null\n",[110,4085,4086],{"class":112,"line":317},[110,4087,188],{"emptyLinePlaceholder":187},[110,4089,4090,4092],{"class":112,"line":347},[110,4091,2080],{"class":145},[110,4093,344],{"class":131},[110,4095,4096,4099,4101,4103,4105,4108,4111],{"class":112,"line":386},[110,4097,4098],{"class":152},"      data",[110,4100,292],{"class":131},[110,4102,295],{"class":152},[110,4104,210],{"class":209},[110,4106,4107],{"class":145}," await",[110,4109,4110],{"class":213}," fetcher",[110,4112,973],{"class":131},[110,4114,4115,4117,4119,4121,4123],{"class":112,"line":392},[110,4116,2112],{"class":131},[110,4118,2115],{"class":145},[110,4120,1731],{"class":131},[110,4122,3715],{"class":152},[110,4124,2010],{"class":131},[110,4126,4127,4130,4132,4134,4136,4139,4142,4144,4147,4149,4151,4153,4155],{"class":112,"line":397},[110,4128,4129],{"class":152},"      error",[110,4131,292],{"class":131},[110,4133,295],{"class":152},[110,4135,210],{"class":209},[110,4137,4138],{"class":152}," err",[110,4140,4141],{"class":201}," instanceof",[110,4143,3720],{"class":1230},[110,4145,4146],{"class":209}," ?",[110,4148,4138],{"class":152},[110,4150,292],{"class":131},[110,4152,3828],{"class":152},[110,4154,1893],{"class":209},[110,4156,4157],{"class":135}," 'حدث خطأ غير معروف'\n",[110,4159,4160,4162,4165],{"class":112,"line":403},[110,4161,2112],{"class":131},[110,4163,4164],{"class":145},"finally",[110,4166,344],{"class":131},[110,4168,4169,4172,4174,4176,4178],{"class":112,"line":414},[110,4170,4171],{"class":152},"      loading",[110,4173,292],{"class":131},[110,4175,295],{"class":152},[110,4177,210],{"class":209},[110,4179,4180],{"class":2210}," false\n",[110,4182,4183],{"class":112,"line":443},[110,4184,2135],{"class":131},[110,4186,4187],{"class":112,"line":448},[110,4188,790],{"class":131},[110,4190,4191],{"class":112,"line":458},[110,4192,188],{"emptyLinePlaceholder":187},[110,4194,4195,4197],{"class":112,"line":463},[110,4196,857],{"class":145},[110,4198,344],{"class":131},[110,4200,4201,4204,4206,4208,4210,4212,4214,4216],{"class":112,"line":473},[110,4202,4203],{"class":152},"    data:",[110,4205,281],{"class":213},[110,4207,284],{"class":131},[110,4209,287],{"class":201},[110,4211,2472],{"class":152},[110,4213,292],{"class":131},[110,4215,295],{"class":152},[110,4217,4218],{"class":131},"),\n",[110,4220,4221,4224,4226,4228,4230,4232,4234,4236],{"class":112,"line":484},[110,4222,4223],{"class":152},"    loading:",[110,4225,281],{"class":213},[110,4227,284],{"class":131},[110,4229,287],{"class":201},[110,4231,3999],{"class":152},[110,4233,292],{"class":131},[110,4235,295],{"class":152},[110,4237,4218],{"class":131},[110,4239,4240,4243,4245,4247,4249,4251,4253,4255],{"class":112,"line":509},[110,4241,4242],{"class":152},"    error:",[110,4244,281],{"class":213},[110,4246,284],{"class":131},[110,4248,287],{"class":201},[110,4250,3678],{"class":152},[110,4252,292],{"class":131},[110,4254,295],{"class":152},[110,4256,4218],{"class":131},[110,4258,4259],{"class":112,"line":532},[110,4260,4261],{"class":152},"    execute\n",[110,4263,4264],{"class":112,"line":569},[110,4265,790],{"class":131},[110,4267,4268],{"class":112,"line":579},[110,4269,1268],{"class":131},[15,4271,4273],{"id":4272},"_10-تحسين-تجربة-المطور","10. تحسين تجربة المطور",[594,4275,4277],{"id":4276},"استخدام-vue-devtools","استخدام Vue DevTools",[11,4279,4280],{},"Vue DevTools هو أداة أساسية لتصحيح أخطاء تطبيقات Vue 3:",[23,4282,4283,4286,4289,4292],{},[26,4284,4285],{},"فحص شجرة المكونات",[26,4287,4288],{},"مراقبة الحالة التفاعلية",[26,4290,4291],{},"تتبع أحداث المكونات",[26,4293,4294],{},"تحليل أداء العرض",[594,4296,4298],{"id":4297},"إعداد-التطوير-الفعال","إعداد التطوير الفعال",[101,4300,4302],{"className":600,"code":4301,"language":602,"meta":106,"style":106},"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  plugins: [vue()],\n  server: {\n    hmr: true\n  },\n  build: {\n    sourcemap: true\n  }\n})\n",[33,4303,4304,4309,4325,4337,4341,4354,4366,4373,4380,4385,4392,4399,4403],{"__ignoreMap":106},[110,4305,4306],{"class":112,"line":113},[110,4307,4308],{"class":194},"// vite.config.ts\n",[110,4310,4311,4313,4315,4318,4320,4322],{"class":112,"line":142},[110,4312,146],{"class":145},[110,4314,149],{"class":131},[110,4316,4317],{"class":152},"defineConfig",[110,4319,172],{"class":131},[110,4321,175],{"class":145},[110,4323,4324],{"class":135}," 'vite'\n",[110,4326,4327,4329,4332,4334],{"class":112,"line":184},[110,4328,146],{"class":145},[110,4330,4331],{"class":152}," vue",[110,4333,3292],{"class":145},[110,4335,4336],{"class":135}," '@vitejs/plugin-vue'\n",[110,4338,4339],{"class":112,"line":191},[110,4340,188],{"emptyLinePlaceholder":187},[110,4342,4343,4345,4348,4351],{"class":112,"line":198},[110,4344,653],{"class":145},[110,4346,4347],{"class":145}," default",[110,4349,4350],{"class":213}," defineConfig",[110,4352,4353],{"class":131},"({\n",[110,4355,4356,4359,4361,4363],{"class":112,"line":227},[110,4357,4358],{"class":152},"  plugins:",[110,4360,1317],{"class":131},[110,4362,105],{"class":213},[110,4364,4365],{"class":131},"()],\n",[110,4367,4368,4371],{"class":112,"line":260},[110,4369,4370],{"class":152},"  server:",[110,4372,344],{"class":131},[110,4374,4375,4378],{"class":112,"line":265},[110,4376,4377],{"class":152},"    hmr:",[110,4379,4069],{"class":2210},[110,4381,4382],{"class":112,"line":271},[110,4383,4384],{"class":131},"  },\n",[110,4386,4387,4390],{"class":112,"line":306},[110,4388,4389],{"class":152},"  build:",[110,4391,344],{"class":131},[110,4393,4394,4397],{"class":112,"line":311},[110,4395,4396],{"class":152},"    sourcemap:",[110,4398,4069],{"class":2210},[110,4400,4401],{"class":112,"line":317},[110,4402,790],{"class":131},[110,4404,4405],{"class":112,"line":347},[110,4406,914],{"class":131},[15,4408,4409],{"id":4409},"الخاتمة",[11,4411,4412],{},"Vue 3 يوفر مجموعة قوية من الأدوات والأنماط لبناء تطبيقات ويب حديثة وقابلة للتوسع. من خلال إتقان Composition API، Pinia لإدارة الحالة، والأنماط المتقدمة، يمكنك بناء تطبيقات أكثر صيانة، أداءً، وتجربة مطور أفضل.",[11,4414,4415],{},"تذكر أن أفضل الممارسات تتطور مع الإطار. ابق على اطلاع دائم بأحدث التطورات في مجتمع Vue، وطبق هذه الأنماط تدريجياً في مشاريعك. التوازن بين الكود النظيف، الأداء، وقابلية الصيانة هو مفتاح بناء تطبيقات Vue 3 ناجحة في 2025. 🚀",[4417,4418,4419],"style",{},"html pre.shiki code .sffyN, html code.shiki .sffyN{--shiki-light:#24292E;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .ssFZ1, html code.shiki .ssFZ1{--shiki-light:#22863A;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sFcZJ, html code.shiki .sFcZJ{--shiki-light:#6F42C1;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sEkCa, html code.shiki .sEkCa{--shiki-light:#D73A49;--shiki-default:#C586C0;--shiki-dark:#C586C0}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sToQf, html code.shiki .sToQf{--shiki-light:#005CC5;--shiki-default:#4FC1FF;--shiki-dark:#4FC1FF}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .se2iQ, html code.shiki .se2iQ{--shiki-light:#032F62;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s5T4v, html code.shiki .s5T4v{--shiki-light:#032F62;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .su_XB, html code.shiki .su_XB{--shiki-light:#6F42C1;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .s6-XD, html code.shiki .s6-XD{--shiki-light:#005CC5;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .sGRYn, html code.shiki .sGRYn{--shiki-light:#6F42C1;--shiki-default:#C8C8C8;--shiki-dark:#C8C8C8}html pre.shiki code .sUwQ0, html code.shiki .sUwQ0{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#F44747;--shiki-default-font-style:inherit;--shiki-dark:#F44747;--shiki-dark-font-style:inherit}html pre.shiki code .s7v1m, html code.shiki .s7v1m{--shiki-light:#005CC5;--shiki-default:#569CD6;--shiki-dark:#569CD6}",{"title":106,"searchDepth":184,"depth":184,"links":4421},[4422,4423,4427,4431,4435,4443,4447,4451,4455,4459,4463],{"id":17,"depth":142,"text":18},{"id":588,"depth":142,"text":589,"children":4424},[4425,4426],{"id":596,"depth":184,"text":597},{"id":917,"depth":184,"text":918},{"id":1173,"depth":142,"text":1174,"children":4428},[4429,4430],{"id":1177,"depth":184,"text":1178},{"id":1626,"depth":184,"text":1627},{"id":1934,"depth":142,"text":1935,"children":4432},[4433,4434],{"id":1938,"depth":184,"text":1939},{"id":2232,"depth":184,"text":2233},{"id":2394,"depth":142,"text":2395,"children":4436},[4437,4439,4441],{"id":2398,"depth":184,"text":4438},"استخدام shallowRef و shallowReactive",{"id":2486,"depth":184,"text":4440},"تحسين العرض مع v-memo",{"id":2600,"depth":184,"text":4442},"استخدام nextTick بحكمة",{"id":2707,"depth":142,"text":2708,"children":4444},[4445,4446],{"id":2711,"depth":184,"text":2712},{"id":2930,"depth":184,"text":2931},{"id":3225,"depth":142,"text":3226,"children":4448},[4449,4450],{"id":3229,"depth":184,"text":3230},{"id":3443,"depth":184,"text":3444},{"id":3597,"depth":142,"text":3598,"children":4452},[4453,4454],{"id":3601,"depth":184,"text":3602},{"id":3612,"depth":184,"text":3613},{"id":3622,"depth":142,"text":3623,"children":4456},[4457,4458],{"id":3626,"depth":184,"text":3627},{"id":3901,"depth":184,"text":3902},{"id":4272,"depth":142,"text":4273,"children":4460},[4461,4462],{"id":4276,"depth":184,"text":4277},{"id":4297,"depth":184,"text":4298},{"id":4409,"depth":142,"text":4409},"development","إتقان Composition API في Vue 3، إدارة الحالة مع Pinia، والأنماط المتقدمة لبناء تطبيقات جاهزة للإنتاج. يشمل أمثلة حقيقية، تكامل TypeScript، وتقنيات تحسين الأداء.","md","https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?auto=format&fit=crop&w=1200&q=80",false,"ar",{"excerpt":4471},{"type":8,"value":4472},[4473],[11,4474,13],{},"/anmat-vue3-asasyh-2025","2025-05-16",{"title":5,"description":4465},"أنماط-vue3-أساسية-2025",[4480,4481,4482,4483,602,4484,4485,4486,4487],"vue3","patterns","best-practices","javascript","frontend","architecture","composition-api","pinia","2025-10-10","tht73YaMWIQMMjZltncrGUeZ_DggZpgiRrEcko0BOC4",{"id":4491,"avatar":4492,"bio":4493,"extension":4466,"github":4494,"linkedin":4495,"locale":4469,"meta":4496,"name":4498,"role":4503,"slug":6,"stem":4504,"twitter":4505,"website":4506,"__hash__":4507},"authors_ar/ar/authors/رائد-البحري.md","/images/raed-bahri.avif","مدير منتجات ومطور متخصص في التطبيقات العربية أولاً","lord007tn","raed-bahri",{"path":4497,"title":4498,"description":106,"body":4499},"/ar/authors/raed-albhry","رائد البحري",{"type":8,"value":4500,"toc":4501},[],{"title":106,"searchDepth":184,"depth":184,"links":4502},[],"المؤسس و مطور منتجات","ar/authors/رائد-البحري","El_Raed_Bahri","https://raedbahri.com","pMOe7fRPZ-myQQEq3wdjao2Xvtyy74dyBfL4UTF1K2s",1761775951287]