https://virgool.io/VueFramework/feed انتشارات فریمورک Vue.JS مختص عاشقان این فریمورک fa 2026-06-16 10:34:00 https://files.virgool.io/upload/publication/dequz0krzc6k/f3gvwi.png https://virgool.io/VueFramework https://virgool.io/VueFramework/%D8%B3%D9%87-%D8%B1%D9%88%D8%B4-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%AF%D9%87%DB%8C-%D8%A7%D9%88%D9%84%DB%8C%D9%87-store-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-vuex-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-vue-cli-xdin5d6iadid مقدار دهی به صورت مستقیم در فایل مربوط به storeتو این حالت شما هنگام تعریف کردن property ها (یا همون state هاتون) باید مقدار اولیه رو مشخص کنید:همونطور که در تصویر زیر میبینید ما به user مقدار اولیه دادیم:کار دیگه ای که تو این روش میشه انجام داد این هست که دیتا مون رو قبلا تو localstorage ذخیره کرده باشیم و الان بخوایم تو store ذخیرش کنیم:ایراد روش بالا این هست که اطلاعات حساس مثله token ها رو نمیشه اینطور ذخیره کرد چون احتمال XSS attacks به وجود میاد(سعی میکنم یه پست راجع بهش بنویسیم اما سرچ کنید حتما مطالبه زیادی در موردش پیدا میکنید)راه حلش این هست که توی store ذخیره بشن نه اینکه store از localstorage بخونه که خوب برای این کار میتونید در فایل App.vue تو یکی از hook های created و یا mounted در خواست http رو با axios و یا چیزی مشابه آن بزنید و اطلاعات رو تو store ذخیره کنید:در تصویر زیر متد getUser متدی هست که درخواست http میزنه (جزییاتش بستگی به چیزی داره که ازش استفاده میکنید لذا از پیاده سازیش رو حذف کردم)ایراد این روش این هست که چون وقتی vue root instance شروع به load شدن میکنه این درخواست زده میشه به همین خاطر شما یک پرش خواهید داشت یعنی اگر تو این درخواست قرار هست اطلاعات کاربری دریافت و در store ذخیره بشه ابتدا هنگام لود شده اولین صفحه کاربر لاگین نیست بعد که جواب درخواستتون از سرور میرسه و نتیجه تو store ذخیره میشه حالا تازه کاربر لاگین میشه و اطلاعاتش نمایش داده میشه.خوب این یک مشکل بزرگ هست چطور باید حلش کرد؟باید درخواستتون رو قبل از load شدن vue root instance بزنید.کجا میشه این کار رو کرد؟main.jsشما میتونید در بالای این فایل vuex رو import کنید و درخواست http تون رو بزنید و اطلاعات رو store کنید:امیدوارم این پست براتون مفید بوده باشه.خوشحال میشم بهم فیدبک بدین و سوال و چالش هاتون رو مطرح کنید. Vue.JS محمد سعادتی Tue, 03 Nov 2020 13:16:11 +0330 https://virgool.io/VueFramework/vuejs-ssr-impact-on-seo-ugjymz4u6v3i مطالبی که در این نوشته بررسی می کنیم :۱- چرا به SSR (server side rendering) نیاز داریم ؟۲- بررسی سئو و SSR (بخش مورد علاقم)۳- چه زمانی از SSR استفاده کنیم؟۴- تفاوت بین CSR (client side rendering ) و SSR چیست؟۵- در Vue چطور SSR را پیاده سازی کنیم؟کلاینت ساید رندرینگ (CSR) : کلاینت ساید رندرینگاگر بخوام ساده این بخش رو توضیح بدم ، به این صورت عمل می کنه که : وقتی شما درخواست باز شدن وب اپلیکیشن (SPA-PWA هم می تواند باشد ) را به سمت سرور ارسال می کنید ، سرور ابتدا یک صفحه ی ساده html رو به همراه فایل های css و js به شما برمیگردونه . حالا نوبت مرورگر شماست که این کدهای js را کامپایل بکنه و صفحات html رو به صورتی که شما طراحی کردین ، به کاربر نشون بده. همچنین تمامی ملحقات پروژه و ساختارها مثل router - stateManager و هرچیزی که در باندل پروژه شماست هم بایستی به صورت Up and Running روی مرورگر توانایی اجرا شدن داشته باشه.یعنی اینکه وب اپلیکیشن شما پس از پشت سر گذاشتن این مراحل قابل استفاده است.سرور ساید رندرینگ ( SSR ) چیست؟خب قبل از پیدا شدن سر و کله ی فریم های پیشرو (PWA ) و SPA (single page Application ) ها ما از این قابلیت استفاده می کردیم و چیز عجیبی نیست . چطوری ؟مثلا در نظر بگیرید که شما یک صفحه وب مثلا با PHP و جاوا اسکریپت در سمت کلاینت ، قبلا توسعه داده اید. نحوه عملکرد به این صورت بود که وقتی شما درخواست بازدید از یک صفحه رو داشتید ، سرور همه چیز رو برای شما کامپایل می کرد (پارامترها و داده های صفحه را جایگزاری میکرد) و صفحه HTML کامل رو برای کاربر به سمت مرورگرش پس می فرستاد ،اما وقتی شما روی route دیگری کلکی می کردید ، سرور مجبور بود باز همینکار رو برای شما انجام بده یعنی : فایل PHP رو بگیره ، کامپایل کنه ، به HTML برسونه و js و css ها در اون به اصطلاح populate بشن و باز برگردونه به سمت مرورگر شما - (وقت گیر بوده نه !!!)چه زمانی از ‌SSR استفاده کنیم؟دو دلیل خیلی خوب وجود داره برای اینکه از ‌SSR در پروژه هاتون استفاده کنید۱- وقتی به SEO نیاز دارید (یک وقتی هست دارید پنل توسعه می دین و SSR به کار نمیاد)۲- نمایش سریعتر محتوای قابل درک برای کاربر (reducing time to content) خب شاید سوال پیش بیاد که پیاده سازی SSR آیا معایبی هم داره ؟همیشه یک trade off بین چیزی که بدست میارید و چیزی که از دست می دین باید وجود داشته باشهبیاید بررسی کنیم :خب من یک محیط node.js باید روی سرور بالا بیارمبخاطر محاسبات اضافه ای که روی سرور ام تحمیل میشه ، مقداری منابع بیشتر باید مصرف کنمنیاز هست که کدهایی که قبلا سمت کلاینت زدم رو ریفکتور کنم و بهینه تر بنویسمباید با sysAdmin سر و کله بزنم و راضیش کنم که کارمو راه بندازه :)))ولی خب مهم نیست چون چیزی بدست میارم که از همه چی مهم تره : better SEOسئو و SSR - سرورساید رندرینگ :یک نکته ای رو باید خدمتتون در همین اواسط کار (شاید باید اولش می گفتم نمیدونم) عرض کنم که :آیا گوگل می تواند js را ایندکس کند ؟بحث در این خصوص در محافل SEO خیلی زیاد هستش و نظرات متفاوتی از دوستان متفاوتی شنیده میشه که قابل احترام هست و احتمالا حاصل تجربه این دوستان ،‌اما خب ما کاری به اینها نداریم و صحبت خودمونو می کنیم :)بله گوگل می تواند فایل های js را تفسیر و index کندولی تفسیر و ایندکس کردن این صفحات که توسط js تولید شده اند برای ربات ها زمان بر هستش. پس ربات گوگل یکبار به سایت شما مراجعه می کنه ، میبینه که اوه کلی فایل js اینجا ریخته و خب چون حوصله نداره چیزهایی که می تونه برمیداره و ایندکس می کنه و در مرحله دوم یا در اصطلاح second wave میاد محتوای شما را ایندکس می کنه . (این دیدگاه traditional در برخورد با js یا محتوای ویدئویی و متنی هستش که ما برای اثبات نیازمان به SSR به همین بسنده می کنیم - البته ۳ ماه پیش آقای مارتین اسپلیت (موقشنگ) مبحث two wave of indexing رو کلا زیرش کشید و گفت اون چیزی که شما فکر می کنید نیست... ).تصویر زیر هم قشنگه و کل چیزهایی که گفتم رو شامل میشهتجربه شخصی در پیاده سازی SSR و تاثیر بر SEOداده های زیر ، داده های یک وبسایت که به تازگی SSR روی اون انجام شده و ربات های گوگل در حال ایندکس کردن مطالب هستند و سایت هم کاملا نوپا است پیاده سازی SSR روی فریم ورک Vueاز متدهای مختلفی برای این روش استفاده میشه مثل موارد زیر :۱- اهل فن باشی و از Universal code خود Vue استفاده کنی :رفرنس : https://ssr.vuejs.org/guide/universal.html#data-reactivity-on-the-server ۲- استفاده از Nuxt.js۳- استفاده از Quasar Framework۴- استفاده از Express۵- استفاده از ves https://github.com/easy-team/ves پیاده سازی SSR با Expressبرای این بخش از پکیج vue-server-renderer استفاده می کنیم . برای استفاده و اضافه کردن این پکیج دستور زیر رو استفاده می کنیم :npm install vue vue-server-renderer express — saveعملکرد صحیح در نحوه رندرکردن صفحات در این پکیج برای ما حائز اهمیت است . vue instance ما در پروژه روی سرور به وسیله ی renderer function این پکیج اجرا میشه .بیاید یک فایل index.js بسازیم و توابع مورد نیازمون رو برای اجرا فراخوانی کنیمconst Vue = require('vue') const server = require('express') ()const renderer = require('vue-server-renderer').createRenderer()حالا در Express یک instance از vue ایجاد می کنیمserver.get('*', (req, res) => { const app = new Vue({ data: {}, template: `` })}) server.listen(8000)به همین راحتی ، حالا برای نمونه یک سمپل استادی رو باهم بررسی می کنیم:server.get('*', (req, res) => {const app = new Vue({data: {array: ['vue', 'java', 'python', 'javascript'],},template: `<div v-for=&quot(a, index) in array&quotv-bind:key=&quotindex&quot>{{ a }}</div>`}) renderer.renderToString(app, (err, html) => {res.end(`<!DOCTYPE html><html lang=&quoten&quot><head><title>Vue Js – SSR SAMPLE</title></head><body>${html}</body></html> `)})}) server.listen(8000)پیاده سازی SSR به وسیله Nuxt :احتمالا دوستانی که react کار کردند اسم فریم ورک next.js رو شنیده باشند . این دقیقا مشابه همان فریم ورک و کارکردی دقیقا مثل همان دارد.این فریم ورک به شما امکان ایجاد وب اپلیکیشن های پیشرو (progressive web application ) مبتنی بر vuejs می ده که از SSR و امکانات مختلفی مثل ,prerender,vuex,router , .... هم پشتیبانی می کنه.لینک فریم ورک : https://nuxtjs.org/ شکل زیر نشان دهنده ی فلوی عملکرد این فریم ورک هستش وقتی که شما یک درخواست به سمت سرور ارسال می کنید و یا به وسیله nuxt-link در اپلیکیشن navigate (از روتی به روت دیگه منتقل شدن ) می کنید.همونطور که گفته شد ساختار دقیقا مشابه با next.js هستش.هرفایل vue در زیرشاخه نشان دهنده یک route مجزا است . همچنین در اخرین آپدیت توانایی ایجاد فایل ها استاتیک و ذخیره و serve کردن اونها نیز به قابلیت های این فریم ورک اضافه شده .کافیه که کانفیگ زیر رو در فایل nuxt.config.js ذخیره کنید export default {target:'static'} از این رو می تونید وب اپلیکیشن هایی که کاملا دوستدار SEO هستند توسعه بدین.رفرنس : https://nuxtjs.org/guide/ نکته : اگر میخاین از این فریم ورک استفاده کنید ، بهتره که پروژه رو کلا در این فضا ایجاد کنید و از CLI اون هم استفاده کنید . همچنین میتونید به پروژه اضافه اش بکنید ، دست خودتونه و توضیحات بیشتر از این رو میسپارم به داکیومنت خود nuxt در ادرس زیر : https://nuxtjs.org/guide/installation جمع بندی در این نوشته باهم تفاوت های SSR و CSR رو باهم بررسی کردیم ، اینکه چطور یک پروژه vue رو برای بهینه سازی های SEO آماده کنیم هم راجع بهش صحبت کردیم. اگر نظری دارید خوشحال میشم کامنت کنید. ممنونم که تا اینجا همراهم بودین. Vue.JS علیرضا شیراوند Wed, 30 Sep 2020 01:48:54 +0330 https://virgool.io/VueFramework/%DA%86%D8%B1%D8%A7-%D8%A7%D8%B2-vue-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%85%DB%8C%DA%A9%D9%86%D9%85-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D9%87-react-%D8%AA%D8%B1%D8%AC%DB%8C%D9%87%D8%B4-%D9%85%DB%8C%D8%AF%D9%85-b8cislllktu6 اینکه چرا من تا این حد Vue رو دوست دارم و React رو رها کردم داستان خودشو داره، ولی میخوام اینجا یه سری دلایل بیارم که چرا باید React یا Angular رو بیخیال بشید و بچسبید به Vue و مکمل محبوب SSR اون یعنی Nuxt.در ادامه قراره رستگار بشید :)1 - انعطاف پذیرهدر واقع منظورم از انعطاف پذیری بحث های حاشیه‌ای نیست. خیلی واضح میگم:وقتی با Vue کار میکنید روش های زیادی برای انجام یک کار دارید. Vue سعی نمی کنه شما رو در انجام کارها به یک روش خاص، مثل بعضی از چارچوب های معروف جاوا اسکریپت، محدود کنه.برای پروژه های بزرگ ، هر دوی Vue و React در روتینگ ( Routing ) راه حل های قدرتمندی ارائه میدهند. همچنین جامعه React با ارائه ابزار های State Management مثل Redux و Flux قدرت بیشتری به React داده است. اما فکر نمیکنم Vuex کم از این دو داشته باشد، حتی کار با Vuex خیلی راحت تر است مخصوصا اگر از Nuxt هم استفاده کنید دیگر آن دردسر های همیشگی فهموندن رو ندارید...اینجاست که Vue یک قدم از React جلو می‌افته :)2 - عاشق چشم و ابروی ما استوقتی با Vue کار میکنید حس میکنید که ما رو دوست داره... اما چرا؟برای مثال VueCli که با پیکربندی ، اجرا ، تجزیه و تحلیل و آزمایش یک پروژه جدید سرعت پروژه را افزایش میدهد. VueCli در مقایسه با رقبا بسیار انعطاف پذیرتر است و تنظیمات از پیش پیکربندی شده بسیاری را ارائه می دهد.یا Syntax ویو که همه اجزاش به طور یکپارچه به شکلی بسیار ساده با هم در ارتباط هستند.ساده و باحال نیست؟اصلا همین سادگی Vue هست که همه رو مجذوب خودش کرده و الان هم که دارم این مطلب رو مینویسم 173 هزار تا ستاره تو GitHub خورده...همچنین بگم که همینطور که میدونید یا شایدم نمیدونید وقتی CSS رو تو React ایمپورت میکنید React اون رو به CSS In JS تبدیل میکنه تا استایل شما فقط روی کامپوننتی که میخواید محدود بشه که روی پرفورمنس تاثیر خوبی نداره! اما تو Vue اینطور نیست و میتونید بدون اینکه از CSS In JS استفاده کنید از وجود CSS محدود شده ( Scoped ) لذت ببرید. البته همانطور که گفتم Vue شما را محدود نمیکند، و میتوانید از وجود پکیج هایی مثل styled-components-vue و vue-emotion بهره ببرید!3 - کتابخانه های UIحتما شما هم برای انتخاب بهترین UI Framework سرچ و تحقیق کرده‌اید و اگر با React کار میکنید BluePrint انتخاب اولتان است اما در Vue اوضاع کمی متفاوت است و شما با کلی UI Framework طرف هستید. مخصوصا دو غول به اسم های Vuetify و BootstrapVue ( رقابتشون فعلا سر تعداد کامپوننت ها است )همچنین وقتی با UI Frameworks کار میکنید اضافه کردن کامپوننت ها در React بسیار سخت است و باید تک تک کامپوننت ها را ایمپورت کنید که حتی باعث میشود دور UI Frameworks ها را خط بکشیدimport { Button, Alert, Cards, Forms, Images, Figures, Jombotron, ListGroup, Progress, Spinners, Modal, Navs, Tabs, Popovers, Pagination } from 'react-bootstrap/Button';عذاب آور نیست؟!! لیست کامل UI Framework های محبوب Vue و ReactVueVuetify BootstrapVueBuefyQuasarCoreUI VueVue MaterialVuesaxiViewVue Material KitPrimeVueElementKeen UIMint UIVueTailwindReactAnt DesignMaterialUIReact BootstrapBlueprintSemantic UI ReactRebassFluent UIEvergreenChakra UIGrommetهر دو فریمورک در گستره عظیم UI Frameworks عملکرد خوبی داشتند اما React بدلیل مشکل خود در ایمپورت شما را به سمت کار با کلاس ها سوق میدهد.4 - کارایی، سرعت و حجمفقط 10KBتو عکس بالا هیچ حرفی نیست... فقط میخوام بگم که React توی بحث برفورمنس خیلی از Vue عقب تره!الان که دارم این مقاله رو مینویسم نسخه فعلیش 2.6.10 هست که حجم Runtime کلیش 22.8KB هست ولی نسخه 3 که فقط چند روزه منتشر شده فقط 10KB حجم داره که یعنی تقریبا 1/4 React و برای هرکسی باور نکردنیه! (300 خط کد حدوداً میشه 10KB ) در این بین هم که Ember.js و Angular توی حجم روسیاه هستند...5 - محبوب است و توسط بهترین ها استفاده شدهحتما تا حالا رستگار شدید و به قدرت Vue.JS ایمان آوردید پس چرا گوگل نیاره! بله درست متوجه شدید. گوگل که خود به وجود آورنده Angular است در قسمت استخدام و فرصت های شغلی خود از Vue.JS استفاده میکند. البته استفاده از Vue به گوگل محدود نمیشود و شرکت ها و سایت های معروف بسیاری با استفاده از این فریمورک قدرتمند ساخته شده‌اند. مثل :Adobe BehanceAdobe Schrift Bewegt Apple DevelopersFacebook NewsFeedNetflixXiaomiAlibabaGitLabLiveStorm9GagNintendoChessو ....6 - قدرتمند است!برخلاف دیگر فریمورک ها، Vue از ابتدا طراحی شده است تا به تدریج قوی تر شود (: این مدلی دوست دارم :) همچنین هسته اصلی Vue فقط بر روی لایه View متمرکز شده (معماری MVVM ) و انتخاب و ادغام آن با سایر فریمورک ها یا پروژه های دیگر آسان است. و همچنین یادتان نرود دست شما را در انجام هر کاری باز میگذارد... Vue.JS محمد علی چراغی Tue, 29 Sep 2020 20:38:52 +0330 https://virgool.io/VueFramework/composition-api-n60ip59yn0yb Composition APIشاید به جرات میتونم بگم بزرگترین تغییر Vuejs 3 نسبت به برادر بزرگترش (Vue 2) همین Composition API باشه که تو این مقاله قرار مفصل راجبش حرف بزنیم.Composition API چیست؟فقط برای رفع نگرانی ، این API جدید جایگزین سینتکس قبلی Vue 2.x نشده که API Options نام داره ! حتی می توانیم از API Options در Vue 3 استفاده کنیم. Composition API فقط مدلیه که برای رفع محدودیتهای API Options در Vue 2 ایجاد شده. در بخش بعدی این محدودیت ها را بررسی خواهیم کرد .خیلی ساده بخام واستون بگم با Composition API دیگه نیازی نیس که data  هر رو یه جا  function  ها رو یه جا تعریف کنید با این مدل میتونیم خوانایی کدمون رو بیشتر کنیم مثلا هر data رو کنار function اون تعریف کنیم و اینجوری نظم و خوانایی کد خیلی بالاتر میره البته این فقط یه نمونه کوچیک بود که من گفتم کاریی های فوق العاده دیگه ای هم داره که بهش میپردازیم.چرا اصلا تغییر ؟!!حالا شاید واستون سوال پیش بیاد چرا باید با این روش کد بزنم مگه روش قبلی چه مشکلی داشت اینجاست که باید بگم :۱ توسعه و سازماندهی بهتر۲ پشتیبانی بهتر از TypeScriptداخل عکس زیر مشاهده میکنید روش کد زنی Composition API و API Options: Vue.JS Majid Tue, 22 Sep 2020 18:38:08 +0330 https://virgool.io/VueFramework/%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-react-%DB%8C%D8%A7-vue-%DB%8C%DA%A9%D8%A8%D8%A7%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DB%8C%D8%B4%D9%87-fnjyoqn3zvgn مقایسه فوق تخصصی Vue و Reactبرنامه نویس ها از نظر من جزء مشکل پسندترین و کمال گراترین دسته افراد روی زمین هستند. تا چشم به هم میگذاری یک فریمورک یا یک زبان برنامه نویسی جدید توسط آنها پا به عرصه ظهور میگذارد، رقابت ایجاد میکند، دعوا میشود و سرانجام یکی از آنها ترند میشود.خیلی وقت ها از خودم می پرسم : "آیا این همه تنوع نرم افزاری واقع لازم بوده؟"شما فکرش را بکن اگر Taylor Otwell قبل از اینکه بنشیند و Laravel را بنویسد، کمی داکیومنت Ruby On Rails را بالا و پایین میکرد (که میدانم کرده!) و یکبار از خودش میپرسید : "من قرار است چه چیزی به این اضافه کنم تا بهتر بشود؟ آیا لازم است چنین پروژه ای را از صفر و با یک زبان برنامه نویسی دیگر پیاده کنم؟"بعد به خودم میگویم : "صنعت نرم افزار را همین تنوع هایش زیبا کرده است."این مقاله یک مقایسه سطحی و کاملا ابتداییه. برای مقایسه دقیق تر این دو کتابخونه میتونین این مقاله رو بخونین.https://academy.webino.co/react-vs-vue-comparisonجنونی به نام فرانت اند!شاید اگر 5 سال پیش کسی خود را Frontend Developer معرفی میکرد، به او می خندیدیم. مگر Frontend هم دولوپمنت میخواهد؟ یک کد Html و Css است دیگر (میدانیم که HTML هم جزء گنگِ خفنِ زبان هایِ برنامه نویسی نیست!). یک فرانت اند کار (این لفظ عمدا برای توهین و تحقیر این قشر به کار می رود!) خیلی هنر کند چهار خط HTML مینویسد CSS هم که بوت استرپ هندل کرده!بماند که از همان اول هم به همین سادگی نبود ولی الان دیگر کلا قضیه فرق کرده است.میدانیم که JavaScript زبان بد قلقی است و کار کردن با آن کار هر کسی نیست. از طرفی روش های جدید توسعه فرانت اند به گونه ای هستند که سرت را بالا بیاوری می بینی وسط انبوهی از کدهای پیچیده و زبان نفهم گیر افتاده ای! پس میتوان فرانت اند کارها را هم برنامه نویس خواند (اگر دات نت کار های محترم اجازه می دهند!)این روز ها فرانت اند داغ تر از همیشه است و توسعه دهندگان فرانت اند را روی هوا می قاپند! بیشترین آگهی های استخدام سایت های کاریابی را آگهی های استخدام فرانت اند کارها از آن خود کرده اند.کدام یک بهترند؟ مقایسه React و Vueهمه ی اینها به کنار بین خود توسعه دهندگان فرانت اند چند وقتی است دعوای کی بهتر است سر گرفته!Angular کارها (که من تا به امروز توفیق دیدن حتی یک نفرشان را نداشته ام از نزدیک) بی سر و صدا کارشان را میکنند و خیلی کاری با این نزاع ها ندارند. دعوای اصلی بین React (فریمورکی ساخته شده با عشق توسط فیسبوک) و Vue ساخت چین (امّا بر آمده از Creative Lab گوگل) بالا گرفته است. یکی استار های گیت هاب را به رخ دیگری میکشد و دیگری میگوید توئیتر را با فریمورک ما زده اند. ولی واقعا کدامیک بهترند؟ بلخره یک نفر باید بنشیند کاری بکند و تصمیم بگیرد که از این به بعد با کدام کد بزنیم! اینجا من در این مقاله نه چندان با ارزش (!) ، قصد دارم یک مقایسه سردستی انجام بدهم با چند کد ساده. انتخاب اینکه کدام بهتر است با شما.قبل از شروع این را بگویم که :من قصد ندارم بگویم کدامیک بهترند و فقط یک کد را با هر دو ابزار خواهم نوشت. مقایسه و نتیجه گیری با شما. پس اگر طرفدار دو آتشه هر کدام از این دو فریمورک هستید لطفا کامنت ها را نجوید :)ضمنا حرفهایم در مورد لاراول هم یک شوخی برای باز کردن سر صحبت بود ;)1- مقایسه Syntax در حالت List Rendering :فرض کنید من لیستی از چند میوه دارم که میخواهم آنها را در صفحه ام چاپ کنم. یک کامپوننت مجزا برای لیست میوه هایم میسازم و درونش لیست مورد نظرم را رندر میکنم.در Vue این کامپوننت به این شکل در می آید:رندر کردن یک لیست در VueJsحال آنکه در React میتوان این شکلی این کار را انجام داد:رندر کردن یک لیست در React2- مقایسه Syntax در Event ها :فرض کنید بخواهیم برای یک دکمه یک Event تعریف کن، که با کلیک بر روی آن یک Alert به کاربر نمایش داده شود.برای انجام چنین کاری در Vue به این صورت عمل میکنیم :فرایند Event Handling در Vueهمین کار را در React به شکل پایین انجام میدهیم :فرایند Event Handling در React3- مقایسه Syntax کامپوننت ها و Propsفرض کنید بخواهیم یک کامپوننت را درون اپلیکیشن خود لود کنیم و یک ویژگی را به داخل آن پاس بدهیم.در Vue این کار به این شکل انجام می شود :ساختار component والد در Vueساختار component فرزند در Vueدر React این کار بدین شکل خواهد بود:ساختار component والد در Reactساختار component فرزند در Reactاین یک مقایسه کلی بود از این دو فریمورک محبوب فرانت اند.همه ی اینها به کنار، برای انتخاب، مهمترین فاکتور این است :با کدامیک حال دلتان بهتر است؟ممکن است همه دنیا طرفدار بنز و بوگاتی و مازراتی باشند، اما من پیکان جوانان گوجه ای مدل 57 ام را به دنیا نمی دهم :)در آخر میخواهم یک فکت جالب برایتان رو کنم :» آیا میدانستید زبان جاواسکریپت همان زبان جاواست که کوچک شده است برای وب؟ -- استاد شنبلیلهسعی میکنم در آینده، بصورت مفصل تر به مقایسه های این شکلی بپردازم.تا درودی دیگر بدرود ... Vue.JS مجید غفورزاده Wed, 19 Aug 2020 01:54:00 +0430 https://virgool.io/VueFramework/%D8%A8%DB%8C%D8%AA-%DB%8C%D8%A7-%DA%AF%DB%8C%D8%AA-%D9%88%D8%A7%D8%B3%D9%87-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7-qzpfwdsfpki0 بیت ی سیستم هست که امکان ساختن کالکشن های کامپوننت و استفاده انها در پروژه های مختلف رو فراهم میکنه. به چه شکلی؟یعنی ما میایم یدونه کامپوننت میسازیم حالا فرقی هم نداره تو چه فریمورکی بعد میایم روی بیت پوشش میکنیم دقیقا مثل یک گیت. حالا فرضا من میخوام همین کامپوننت رو تو ی پروژه دیگه استفاده کنم. اینجا میام با بیت ایمپورتش میکنم فرض کنید مثل پول کردن گیت. ولی ی فرق داره. مثلا ی کامپوننت ممکنه ی تعداد دیپندنسی داشته باشه اینجا بیت میاد دیپندنسی ها رو هندل میکنه. ی امکان مهم دیگه ورژن گذاری هست. مثلا من این کامپوننت رو اینیت کردم و میام پوش میکنم تو بیت با ورژن ۰.۰.۱. حالا فرداش میام یخورده توسعش میدم و باز پوشش میکنم اما اینبار مثلا با ورژن ۰.۰.۲ !!! هر زمان بخوام هم میتونم بین ورژن های مختلف جا به جا شم! یعنی فرضا دیدم ی باگ داره سریع برمیگردم به ورژن قبلی.حالا میخوام بصورت عملی ی پروژه nuxt با هم بسازیم و ی کامپوننت بهش اضافه کنیم. بعد میایم همین کامپوننت رو پوش میکنیم به بیت و بعد توی ی پروژه دیگه پول میکنیم!قبل شروع کردن بد نیست که فیلتر شکن خودتون رو روشن کنید!توی عکس بالا اومدم ی پروژه ناکست اینیت کردم. پروژم از تایپ اسکریپت و npm استفاده میکنهحالا میام ی کامپوننت Users میسازم و میذارم توی پوشه components حالا میخوام ببیام به بیت پوش کنم این کامپوننت رو . اول از همه با کامند لاین بیت رو نصب کنیم npm install bit-bin -gبعد لازم هست لاگین کنیم با کامند لاین که خب لازمه اکانت داشته باشیم پس قبلش اکانت رو بسازیدحالا داخل کامند لاین bin login رو بزنید. بعد لاگین میخوام بیت رو به پروژه ناکست خودم اضافه کنم. میام bit init رو داخل پوشه ای که package.json پروژه هست میزنم که معمولا داخل روت پروژه هستخب حالا من ی تعداد کامپوننت دارم اما بیت هنوز نمیدونه! یعنی من لازمه به بیت بگم که اقا بیا فلان کامپوننت رو track کن! بیاین به بیت بگیم که users کامپوننت من رو ترک(track) کن!bit add components/users.vue --id usersبا این دستور بالا میتونم بهش بگم اما این دستور دقیقا چیکار میکنه؟! قسمت bit add که واضحه دارم بهش میگم یچیزیو اضافه کن! اما پارامتر اول path کامپوننتی هست که میخوام track کنه! حالا وقتشه بگم ای دی این کامپوننت چیه که با قسمت دوم دستور این رو بهش گفتمخب حالا این دستورو زدم چی شد دقیقا؟! اگر الان بیام bit status رو بزنم در جواب بهم میگه ی کامپوننت جدید پیدا کرده! شباهت زیادی به git status داره!خب حالا کامپوننت رو اضافه کردم پس برم پوشش کنم به بیت! اما هنوز ی کار دیگه قبل پوش مونده! ما میخوایم این کامپوننت رو تو پروژه های دیگه استفاده کنیم! پس لازمه اول بیلد کنیم! واسه بیلد خب به کامپایلر نیاز هست که میشه با این دستور نصبش کرد!bit import bit.envs/compilers/vue --compilerخب حالا وقشته که کامپوننت رو بیلد کنیم! با دستور bit buildخب حالا اگه مثل گیت فرض کنیم وقشته که وارد مرحله staging بشیم! اینجا توی بیت دقیقا stage کردن داریم. به این شکل که من میام ی ورژن به کامپوننت میدم و اون رو استیج میکنم! با دستور:bit tag users 0.0.1 تو این دستور من دارم به بیت میگم که کامپوننت users منو با ورژن ۰.۰.۱ استیج کن!حالا اگه بیام bit status بگیرم به من میگه که کامپوننت users استیج شدهخب حالا مرحله بعد استیج توی git چی بود؟ push! حالا من میخوام پوش کنم به بیت اما تو بیت به اسم اکسپورت شناخته میشهاما! قبل اکسپورت باید بدونیم که کجا میخوایم اکسپورتش کنیم؟ باید ی کالکشن بسازیم و بعد داخل کالکشن خاص بیایم اکسپورت کنیم! اگه وارد داشبورد بیت بشید داخل هدر ی گزینه نیو میبینید. داخل عکس زیر هم گذاشتمبعد از کلیک روی نیو روی کالکشن کلیک کنید! حالا من به این شکل پر کردمخب حالا وقتی بزنید روی create وارد ی صفحه به این شکل میشیدسمت راست نوشته export to this collection. این دستور رو کپی کنید و وارد کامند لاین پیست کنید!خب حالا این دستور چیه؟ واسه من به این شکلهbit export alizangiabadicode.test-for-virgoolاین داره میگه اکسپورت کن به این یوزر نیم(alizangiabadicode) و به این کالکشن خاص(test-for-virgool).خب حالا ی bit status بگیریم دیگه استیج نیست!خب حالا اگه از سایت خود بیت وارد کالکشنی که ساختیم بشیم میتونم کامپوننتمو ببینم!اگه وارد کامپوننت بشم قابلیت این رو داره که بصورت لایو به من نشونش بده! چرا؟ چون که تمام دیپندنسی هایی که که این کامپوننت داررو همراه خودش اورده!خب تا الان ما اومدیم ی پروژه ساختیم و ی کامپوننتش رو داخل بیت اکسپورت کردیم! حالا وقتشه ببینیم چجوری میشه داخل ی پروژه دیگه استفادش کرد!واسه ساختن ی پروژه دیگه با دستوری پروژه ناکست دیگه میسازم! حالا میخوام کامپوننت جدید رو ایمپورت کنم اما چجوری؟! اگه به سایت بیت بریم و به همون صفحه کالکشن برگردیم و وارد کامپوننت بشیم ی قسمتی رو میبینیم به اسم install user as a packge. به عکس پایین ی نگاه بندازید!خب حالا دستوره چیه؟npm i @bit/alizangiabadicode.test-for-virgool.usersخیلی سادست! ی پکیج npm رو دارم به package.json اضافه میکنم!خب حالا بریم سراغ استفاده از کامپوننتمون! خب من میرم داخل پیج اصلی اپ ناکست و میام داخل index.vue این کامپوننت رو ایمپورت میکنم! و بعد ایمپورت میام به کامپوننتام اضافه میکنم! که توی عکس زیر نشون دادمخب حالا اگه پروژرو ران کنم با npm run dev میبینم که کامپوننتم داره نشون داده میشه!اما خب همیشه اینقدر ساده نیست! مثلا ممکنه من بخوام تو این پروژه تغییرات جزیی بدم! کامپوننت کجاست که بخوام تغییرش بدم؟! کامپوننت داخل نود ماژول های منه و من اگه بخوام باید برم اونجا تغییرش بدم. ولی این منطقی نیست! چرا؟ چون که با هر بار npm install تمام تغییرای من میپرن!!!خب اینجا بیت واسه من ی پیشنهاد داره! میگه بیا اول من رو به پروژه اضافه کن یعنی دستور bit init‌ بعد میگه بیا خود کامپوننت رو ایمپورت کن! با دستور bit import alizangiabadicode.test-for-virgool/usersخب این دستور از چه قسمتایی تشکیل شده؟ اول که گفتیم ایمپورت کن و بعد اومدیم یوزرنیم و بعدش کالکشن نیم و بعد اسلش ای دی کامپوننت رو نوشتیم!خب حالا بعد اجرای دستور اگه وارد پوشه کامپوننت بشم میبینم users فولدر واسه من ساخته شده! خب حالا راحت میام تغییرمو میدم خب حالا تغییرمو دادم اما میخوام این تغییرمو اکسپورت کنم تا بتونم تو پروژه های دیگه استفاده کنم!خب اگه بیام ی bit status بگیم میگه که کامپوننت یوزر ی تغییری کرده! حالا تمام مراحل قبل رو میریم یعنی اول استیج با دستورbit tag users 0.0.2 البته اینبار با ورژن ۰.۰.۲ !!بعد هم اکسپورت با دستور bit export alizangiabadicode.test-for-virgoolخب حالا تغییرات رو فرستادیم بالا بریم توی سایت بیت و ببینیم کامپوننت چه تغییری کرده!جالبه ورژن تغییر کرده به 0.0.2 ! حالا من میتونم ورژن قبل رو هم ببینم! یعنی ورژن های مختلف رو دارم و میتونم بینشون جابه جا شم! اما قبل اینکه وارد این بحث بشم بیایم ببینیم که اصلا این تغییرات رو که اکسپورت کردیم چجوری داخل پروژه اول استفاده کنیم!خب من وارد پروژه اول میشم و میام دستور bit import رو وارد میکنم خروجی که باید ببینید به این شکله!داره میگه که این کامپوننت ی ورژن جدید واسش اومده! اما اصلا نگفت که ما الان داریم از ورژن جدید استفاده میکنیم! خب چجوری برم به ورژن جدید؟ با دستورbit checkout 0.0.2 usersاین دستور چیه؟ داره میگه برو به ورژن ۰.۰.۲ کامپوننت با ای دی users. حالا ورژن لوکال من داره از ورژن جدید استفاده میکنه!تو این مقاله ما تونستیم ی یک کامپوننت روی بیت بسازیم و امکان استفاده از اون رو روی پروژه های دیگه با کمترین زحمت پیدا کنیم. حتی الان به ورژن های مختلف کامپوننت هم دسترسی داریم! Vue.JS Ali Zangiabadi Sun, 09 Aug 2020 12:11:53 +0430 https://virgool.io/VueFramework/%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D9%81%DB%8C%D9%84%D9%85%D9%87%D8%A7%DB%8C-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-%D9%88-%DA%A9%D8%A7%D9%85%D9%84%D8%A7-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%AF%D9%88%D8%B1%D9%87%D9%87%D8%A7%DB%8C-angular-%D9%88-vuejs-cifhgrsvzsnx ? مژده مژده مژده ?با عرض سلام و احترام خدمت یکایک شما دوستان خوب و همراهان عزیزبا عنایت به شرایط سخت اقتصادی، تحریم‌های ظالمانه و حضور مهمان ناخوانده‌ای به نام ویروس کرونا و غیره، شاید بد نباشد که هر یک از ما، قدم کوچکی برای یاری رساندن به هموطنان عزیزمان برداریم. از این رو اینجانب تصمیم گرفتم که دو مجموعه از فیلم‌های آموزشی خود را به نام‌های Angular و Vue.js، به صورت کاملا رایگان در اختیار شما بزرگواران قرار دهم.امیدوارم که این دو مجموعه که هر کدام به ترتیب، حاصل ۵ و ۳ سال مطالعه و تدریس و کار عملی می‌باشد، برای شما عزیزان مفید بوده و از آن‌ها نهایت استفاده و بهره را ببرید.ارادتمند شماداریوش تصدیقی@Dariush_Tasdighihttps://t.me/Dariush_Tasdighiنشانی گروه آموزشی Vue.js@DTX_LEARNING_VUEhttps://t.me/DTX_LEARNING_VUEنشانی گروه آموزشی Angular@DTX_LEARNING_ANGULARhttps://t.me/DTX_LEARNING_ANGULARنشانی گروه اصلی@IranianExpertshttps://t.me/IranianExpertsبنی آدم اعضای یکدیگرندکه در آفرینش ز یک گوهرندچو عضوی به درد آورد روزگاردگر عضوها را نماند قرارتو کز محنت دیگران بی غمینشاید که نامت نهند آدمی ???????? Vue.JS Dariush Tasdighi - داریوش تصدیقی Fri, 17 Jul 2020 23:44:19 +0430 https://virgool.io/VueFramework/%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%DB%8C%DA%A9-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%A9%D8%A7%D8%B1-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-jq75htitwmg6 به عنوان یه برنامه نویس فرانت همیشه دنبال این بودم که همین مهارت رو توی نوشتن اپ‌های موبایل هم به دست بیارم. راستش همیشه و مثل همین الان در مورد این که آیا وب از موبایل پیشی میگیره یا برعکس مردد بودم واسه همین تصمیم گرفتم یه کاری بکنم از دور عقب نمونم.چند تا راه داشتم:یاد گرفتن زبان‌های نتیو مثل Swift و Javaتوسعه اپلیکشن‌های وب با استفاده از PWA توسعه اپلیکیشن‌های موبایل با استفاده از یک فریم ورک که به سیستم عامل‌های مختلف خروجی بده و فقط یکبار کدبزنمخوب برای گزینه اول به شدت تنبل و بی علاقه بودم. راستش فکر میکردم که چه کاری کلی وقت بزارم و فقط روی یه پلتفرم بتونم توسعه بدم؟به سرعت رفتم سروقت PWA و بحث شیرین سرویس ورکرها . همین که داشتم یاد میگرفتم و توسعه میدادم متوجه یه سری ضعف‌ها و کمبود‌ها توی این روش شدم. مثلا عدم پشتیبانی دقیق توسط تمام مرورگرها، نداشتن خیلی فیچرهای اپلیکیشن‌های نتیو مثل پوش نوتیفیکشن و ... همین روال رو داشتم ادامه میدادم که برای توسعه یه وب اپلیکیشن فروشگاهی که قرار بود اپ اندروید هم داشته باشه گیر افتادم. قرار شد که اپلیکشن اندرویدش رو TWA کار کنیم. این TWA همون PWA با این فرق که میشه یه خروجی برای اندروید گرفت و نصبش کرد و روی همون موتور کروم اجرا میشه ولی باز یه سری محدودیت مثل خود PWA داره و از همه بدتر این که هنوز خیلی مارکت‌ها پشتیبانی نمیکن. البته خود گوگل پلی مشکلی نداره باهاش و میشه اونجا منتشر کرد.تو گیر و دار همین بدبختی‌های این سیستم بودم که همکارم پیشنهاد داد که آقا برو React Native یادبگیر و خودت رو خلاص کن. من که Vue کار میکردم و تو سطح بالایی ازش بودم برام سخت اومد که باز برم یه فریم ورک دیگه یادبگیرم. گشتم و به چهار تا انتخاب رسیدم:framework7IonicApache CordovaNativeScriptمورد اول که اصلا یه فریم ورک کاملا فرانتی و بهت بیلد‌های نتیو نمیده. فقط ظاهر مطابق با اپلیکیشن‌های نتیو رو میتونی داشته باشی. به نظرم برای توسعه PWA میشه ازش خیلی راحت استفاده کرد و خروجی خوبی داشت.فریم ورک Ionic هم که خیلی قوی تر از NativeScript اما متاسفانه هنوز ورژن Vue رو منتشر نکرده پس بی خیالش شدم.مورد سوم Apache Cordova بود که بازم جذبش نشدم. اول این که کلی در موردش نظر خوندم و دیدم هم قدیمی هم فیچرهای زیادی نداره و کلی درد سر داره با Vue. این شد که رفتم سراغ یادگرفتن NativeScript. تو این فریم ورک یه سری ویژگی‌های مهم دیدم منو مجاب به استفاده کرده:پشتیبانی عالی و قابل اتکا از Vueویجت‌ها و کامپوننت‌های آماده خروجی کدها و عملکرد نتیو روی Android و IOSسیستم ادیتور آنلاین پیشرفته و مشاهده زنده نتیجه کد توی شبیه ساز آنلاین!پشتیبانی از فونت‌های فارسی و RTLجامعه توسعه دهنده قوی و پاسخگوحالا توی قسمت‌های بعدی میریم سراغ تجارب من در استفاده از این فریم ورک و چالش ‌هایی که داشتم.البته من هنوز در حال یادگیری هستم و واسه همین سعی میکنم قدم به قدم که جلو میرم مطلب منتشر کنم و تجاربم رو با شما به اشتراک بزارم.-------------------------بعد از کمی کار کردن با این فریم ورک همراه برخی دوستان مثل آقای حسین حبیبیان به این نتیجه رسیدیم که این فریم ورک فعلا جامعه پشتیبانی خوبی نداره و بخش اعظمی از کامپوننت هاش هنوز بومی سازی نشده و کلی درد سر دیگه سر موارد جزعی که توی کد نویسی نتیو راهی براش وجود داره اینجا هنوز فکری در موردش نشده که مختصری از این موارد رو توی کامنت ها میتونید مشاهده کنید.خودم که حسابی دلسرد شدم فعلا دوباره به همون PWA پناه بردم برای پروژه فعلیم. Vue.JS مستر سفیدی Mon, 06 Jul 2020 17:08:58 +0430 https://virgool.io/VueFramework/reactvsvue-vrbbel4jjk9d این روزها استفاده از کتابخانه ها و فریمورک های جاوا اسکریپتی برای بکارگیری در لایه واسط کاربری و ساخت صفحات وب بسیار متداول شده و سر زبان ها افتاده است. با توجه به نیاز برنامه ها در پیاده سازی صفحات پیچیده وتعاملی با قابلیت responsive بودن، دارای جذابیت های بصری، تغییر در طراحی صفحات با تمرکز بر نقش UI/UX designer که بتواند تعامل موثرتری با کاربران داشته باشد و در عین حال سادگی را نیز در نظر بگیرد با تکنولوژی ها و زبان های پایه ای سخت و زمان بر خواهد بود لذا با توجه به نیاز موجود و برنامه نویسان، فریمورک های جاوا اسکریپتی با قابلیت های بالا و منعطف تر جهت افزایش سرعت تولید برنامه و همچنین سبکی با بهره وری بالا بوجود آمد.در زیر به محبوب ترین و معروف ترین فریمورکای جاوا اسکریپت در سال های اخیر اشاره خواهد شد:انگولار: angular1 رقیب بلامنازع کتابخانه های واسط کاربری در بازه سال های 2012-2015 بود و کاملا مبتنی بر جاوااسکریپت، که از نسخه 2 مبتنی بر Typescript ارایه شد و به دلیل عدم ارایه مسیر مهاجرت مناسب از نسخه 1 به 2 بخش زیادی از برنامه نویسان به کتابخانه های دیگر مهاجرت کردند.ویو: Vue یک فریم‌ورک رابط کاربری متن باز جاوا اسکریپت است که برای ساخت صفحات وب UI استفاده می‌شود. این کتابخانه توسط فردی به نام Evan You توسعه یافته است. قابلیت یکپارچه شدن با دیگر کتابخانه‌های رابط کاربری را بخاطر ساده بودنش دارد. ابتدا در سال 2014 منتشر شد و مجوز آن تحت مجوز MIT می‌باشد. پلت فرم‌های متقابل(cross-platform) را پشتیبانی می‌کند و کاملا به زبان جاوا اسکریپت نوشته شده است. به طوری طراحی شده است که می توان آن را با هر نوع کتابخانه‌ی UI سازگار کرد و قابل انطباق است.vue سعی کرد امکانات کتابخانه های دیگر مثل angular , react را تجمیع کند. این کتابخانه در شرکت های چینی از جمله Alibaba طرفداران زیادی دارد و عمده توسعه آن توسط سازنده آن انجام می شود هرچند contributor های زیادی از سراسر جهان دارد.ری اکت: React به عنوان کتابخانه تولید UI از سال 2011 در Facebook آغاز شد و در سال 2012 در Instagram استفاده شد و در سال 2013 متن باز شد. این کتابخانه با معرفی JSX این امکان را می دهد که تولید کدها و مولفه های HTML در درون فایل های JS انجام شود. بصورت component-base ارایه شده و در سرور NodeJs امکان بارگذاری خارج از browser را دارد.با توجه به موارد بالا جهت انتخاب فریمورک مناسب برای تولید UI در اینجا فقط به مقایسه React , Vue میپردازیم و از Angular بدلیل عدم حمایت مناسب سازندگان آن و کاهش برنامه نویسان خودداری میکنیم.هر دو انتخاب‌های محبوب در بازار هستند. در ادامه به برخی از تفاوت‌های عمده می‌پردازیم: فریم‌ورک Vue برای توسعه برنامه های کاربردی کوچکتر آسان تر است، در حالیکه React در توسعه برنامه های گسترده و پیچیده وب کاربردی مفید است و از دیگر کتابخانه‌ها و بسته‌هایthird-party پشتیبانی می‌کند.فریمورک Vue از template ها برای ساخت کامپوننت ها استفاده می کند و React از JSX.هر دو free و open source هستند.از Vue برای ساخت Progressive Web Application ها که اصطلاحا PWA گفته می شود استفاده می شود و از React برای تولید Single Page Application ها.هر دو بر اساس Virtual DOM کار میکنند. از virtual DOM برای مقایسه با DOM واقعی جهت پیدا کردن element ها update شده استفاده می شود تا فقط همان element بروزرسانی شود تا کل صفحه، که این موضوع سرعت تغییرات در صفحه را بالا می برد.ویو Vue کوچکتر و سریعتر است، دارای قالب های ساده ایست که روند توسعه را سریع تر می کند و از لحاظ syntax نیز ساده تر است. درحالیکه React انعطاف پذیری بیشتری در برنامه های بزرگ در حال توسعه دارد. قابلیت تست آسان تری داشته ، برای برنامه های موبایلی مناسب تر است و اطلاعات و راه حل های بیشتری در دسترس برنامه نویس وجود دارد.ویو Vue توسط یه فرد چینی نوشته شده است درحالیکه React توسط برنامه نویسان فیسبوک توسعه و پشتیبانی می شود.یک برنامه نوشته شده با Vue براحتی در browser قابل load شدن است درحالیکه برنامه React نیاز به transpile دارد.(ترنسپایل عمل تبدیل از یک به زبان دیگر است و با کامپایل تفاوت دارد مثلا از Typescript به Javascript )طراحی در Vue ساده تر است و بطور کلی پیچیدگی های React را ندارد به عنوان مثال پردازش مقدار در React نیاز به بررسی وضعیت های قبلی و بعدی را برای اعمال دارد درحالیکه Vue براحتی عمل بروزرسانی DOM را انجام می دهد.ویو Vue در حقیقت یک فریمورک است که قابلیت تولید صفحات را به تنهایی دارد ولی React یک کتابخانه است و به عنوان core استفاده می شود و برای استفاده از قابلیت های بیشتر برای ساخت کامل یک برنامه وبی قطعا نیاز است از کتابخانه های دیگر به عنوان dependency استفاده کرد. بنابراین این موضوع باعث می شود با اضافه کردن resource vue به صفحه HTML ظرف چند دقیقه یه برنامه ساده داشته باشیم درحالیه React نیاز به build دارد.ری اکت React از Functional programming استفاده می کند و برای داشتن OOP نیاز است با Typescript نوشته شود بجای JSX ولی Vue ترکیبی از هر دو را دارد.هردو به صورت Single file component هستند به این معنی که هر کامپوننت را می توان در یک فایل نوشته و قابلیت reuse را دارد در Vue هر فایل به سه بخش Template, Script, Style تقسیم می شود که هرکدام کار خاصی انجام می دهد درحالیکه در React هر فایل JSX یک فایل جاوا اسکریپتیست که در درون آن HTML پیاده سازی می شود.برای ساخت برنامه های موبایل React در واقع React Native را معرفی کرده با شعار که یکبار نوشته می شود و در IOS , Android استفاده می شود. Vue نیز برای موبایل ابزاری را معرفی کرده است ولی مثل React شناخته شده به عنوان لیدر بازار نیست.بدلیل قدیمی تر بودن و پشتیبانی بهتر React بیشتر از Vue در production استفاده می شود و شزکت های معروفی آن را پیاده سازی کرده اند.مقایسه آگهی های شغلی در سایت های glassdoor , indeed و غیره بر اساس تگ react , vue نشان از تقاضای بالای فرصتهای شغلی در زمینه React است.تعداد سوالات پرسیده شده در StackOverFlow با tag برای Vue در حدود 49,429 و برای React در حدود 186,962 مورد بوده که نشان از کامیونیتی قوی تر React نسبت به Vue است.در زیر به مقایسه این دو براساس پارامترهای مختلف می پردازیم:اطلاعات مخازن کد در GitHubhttps://star-history.t9t.io/#facebook/react&amp;amp;vuejs/vueNPM Trendshttps://www.npmtrends.com/react-vs-vueState Of JSUsageمشاهده اطلاعات بیشتر https://2019.stateofjs.com/front-end-frameworks/Google TrendsSpeed Benchmarkبا توجه به بررسی ها و مقایسه های انجام شده به چند دلیل تکنولوژی react ارجحیت دارد:1. بیشترین تعداد از استفاده کنندگان و توسعه دهندگان vue از کشور چین هستند که این آمار نشان می دهد بخشی از محبوبیت این فریم ورک نه به دلیل مزیتهای آن، بلکه به دلیل توسعه دهنده چینی آن می باشد.2. در ایران نیروهای کاری بیشتری آشنا و مسلط به react هستند و یافتن نیروی کاری جدید در صورت نیاز برای این تکنولوژی آسان تر است.3.از لحاظ React، Community قوی تر است و در صورت وجود مشکل ساده تر می توان به پاسخ آن دسترسی پیدا کرد.4. ری اکت React قابلیت توسعه بالاتری دارد و کامپوننت های بیشتری در اختیار developer قرار می دهد. Vue.JS فاضل فرنیا Wed, 25 Mar 2020 20:47:02 +0430 https://virgool.io/VueFramework/%D9%85%D9%82%D8%AF%D9%85%D9%87-%D8%A8%D8%B1-vue-%D9%82%D8%B3%D9%85%D8%AA-%D9%BE%D9%86%D8%AC%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%81%D8%B1%D9%85-h8zbjzotsu3e یکی از مزیت های استفاده از فریم ورک vue نسبت به روش های سنتی طراحی، در لحظه بودن تغییرات است. در روش سنتی فرض کنید تعدادی عنصر ورودی بر روی فرم دارید ابتدا داده در هر کدام از عناصر وارد می شود زمانی که دکمه بر روی فرم فشرده می شود باید تک تک عناصر را چک کنیم و مقدار هر کدام را دریافت کنیم. مثال برای عنصرها input، select باید مقدار خصوصیت value این عناصر را دریافت کنیم. برای عناصر مانند radio ، یا checkbox باید مقدار خصوصیت checked را بخوانیم. از طرف دیگر اگر بخواهید مقادیر ارسالی از سمت سرور را بر روی فرم نشان دهیم باید عمل معکوس را انجام دهیم.اما در روش جدید هر عنصر را به یک متغییر پیوند دهیم با وارد کردن داده‌ها در عناصر مقدار متغییر به صورت خودکار تغییر می کند از طرف دیگر با تغییر مقدار متغییر ها داده‌های موجود در عنصر اصلاح می شود.به مثال زیر توجه کنید: قسمت templateقسمت templateخط ۶- یک عنصر از نوع input ایجاد می شود با استفاده از دستور v-model این ورودی را به متغییر inputText متصل می کند. زمانی که مقداری درون ورودی تایپ می شود مقدار به صورت خودکار به درون متغییر منتقل می شود و برعکس با تغییر مقدار متغییر inputText مقدار درون عنصر input عوض می شود.خطوط ۹،۱۱،۱۳- سه عنصر ورودی از نوع checkbox ایجاد کرده‌ایم و آن ها را به متغییر به نام checkNames متصل می کنیم. این متغییر از نوع آرایه است و هر ورودی که تیک خورد نام آن درون آرایه قرار می گیرد.خطوط ۱۹، ۲۲- دو عنصور از نوع radiobox ایجاد می شود به متغییر picked متصل می شود هر کدام از رادیو ها انتخاب شود مقدار value‌ آن درون متغییر picked قرار می گیرد.منبعبرای مطالعه ببشتر در مورد فرم ها می توانید به لینک زیر مراجعه کنید https://vuejs.org/v2/guide/forms.html کد این پست را می توانید از لینک زیر دریافت کنید: https://github.com/sedighi-mahdi/vue-login/blob/master/src/components/FormTest.vue Vue.JS mehdi sedighi Thu, 03 Oct 2019 09:23:35 +0330