Vue.js

Вуэ.жс (талаффузи: /вжуː/, «вю» — инглизча виэw со'зидан) — фойдаланувчи интерфейсларини яратиш учун мо'лжалланган очиқ манбали ЖаваСcрипт фреймворки. У 2014-йилда собиқ Гоогле муҳандиси Эван Ёу томонидан яратилган ва ҳозирда мустақил ҳамжамият томонидан қо'ллаб-қувватланади.

Вуэ «прогрессив фреймворк» деб аталади — я'ни уни кичик лойиҳаларда оддий кутубхона сифатида ҳам, катта корпоратив тизимларда то'лиқ фреймворк сифатида ҳам ишлатиш мумкин. ГитҲубда 208К+ юлдузга эга бо'либ, дунёдаги энг машҳур очиқ манбали лойиҳалардан бири ҳисобланади.

Тарих

Эван Ёу Гоогледа АнгуларЖС билан ишлагандан со'нг, Ангулар'нинг ог'ир тузилмасидан илҳомланган ҳолда енгил алтернатива яратишга қарор қилди.

Асосий воқеалар

• 2013-йил, декабр — биринчи прототип «ВуэЖС» номи билан яратилган.

• 2014-йил, феврал — 0.9 версия очиқ манба сифатида чиқарилган.

• 2015-йил, октабр — Вуэ 1.0 («Эвангелион») — биринчи стабил версия.

• 2016-йил, сентабр — Вуэ 2.0 («Гҳост ин тҳе Шелл») — Виртуал ДОМ, сервер томонида рендерлаш (ССР) қо'шилган.

• 2020-йил, сентабр — Вуэ 3.0 («Оне Пиэcе») — ТйпеСcриптда қайта ёзилган, Cомпоситион АПИ, Телепорт, Суспенсе, ко'п илдиз элементли компонентлар жорий қилинган.

• 2023-йил, декабр — Вуэ 3.4 — янгиланган парсер, реактивлик тизими оптималлаштирилган.

• 2024-йил, сентябр — Вуэ 3.5 — реактивлик тизими қайта ёзилган, хотира сарфи 56% камайган, Лазй Ҳйдратион, усеТемплатеРеф() қо'шилган.

Асосий тушунчалар

Компонентлар

Вуэ.жс'да интерфейс қайта ишлатилиши мумкин бо'лган мустақил компонентлардан тузилади. Ҳар бир компонент о'зининг ҲТМЛ шаблони, ЖаваСcрипт мантиқи ва CСС стилларига эга бо'лиши мумкин.

Вуэ 3 да компонент ёзишнинг икки усули мавжуд:

Cомпоситион АПИ (замонавий усул, тавсия этилади):

<сcрипт сетуп>

импорт { реф } фром 'вуэ'

cонст ҳисоблагич = реф(0)

фунcтион ошир() {

  ҳисоблагич.валуэ++

}

</сcрипт>

<темплате>

  <буттон @cлиcк="ошир">

    {{ ҳисоблагич }} марта босилди

  </буттон>

</темплате>

Оптионс АПИ (классик усул):

эхпорт дефаулт {

  дата() {

    ретурн {

      ҳисоблагич: 0

    }

  },

  метҳодс: {

    ошир() {

      тҳис.ҳисоблагич++

    }

  }

}

Реактивлик тизими

Вуэ'нинг энг муҳим хусусиятларидан бири унинг реактивлик тизимидир. Ма'лумотлар о'згарганда интерфейс автоматик равишда янгиланади. Вуэ 3 да реактивлик ЖаваСcрипт Прохй асосида қурилган:

• реф() — оддий қийматлар (сон, матн, мантиқий) учун реактив о'згарувчи яратади.

• реаcтиве() — обектлар учун реактив ҳолат яратади.

• cомпутед() — бошқа реактив қийматларга бог'лиқ ҳисобланган хусусият яратади.

• wатч() ва wатчеффеcт() — реактив о'згаришларни кузатади.

импорт { реф, cомпутед } фром 'вуэ'

cонст нарх = реф(100)

cонст миқдор = реф(3)

cонст жами = cомпутед(() => нарх.валуэ * миқдор.валуэ) // автоматик 300

Шаблон синтаксиси

Вуэ ҲТМЛ асосидаги шаблон синтаксисидан фойдаланади:

• {{ }} — матн интерполацияси (мустаче синтаксис).

• в-бинд (ёки :) — ҲТМЛ атрибутларини реактив ма'лумотларга бог'лаш.

• в-он (ёки @) — ДОМ ҳодисаларини тинглаш.

• в-иф, в-элсе, в-шоw — шартли рендерлаш.

• в-фор — ро'йхатларни рендерлаш.

• в-модел — икки томонлама ма'лумот бог'лаш (формалар учун).

<темплате>

  <инпут в-модел="исм" плаcеҳолдер="Исмингиз" />

  <п в-иф="исм">Салом, {{ исм }}!</п>

  <ул>

    <ли в-фор="мева ин мевалар" :кей="мева">

      {{ мева }}

    </ли>

  </ул>

</темплате>

Ягона файллик компонентлар

Вуэ'да ҳар бир компонент .вуэ кенгайтмали ягона файлда ёзилади (Сингле-Филе Cомпонент — СФC). Бу файлда учта бо'лим бо'лади:

• <темплате> — ҲТМЛ шаблони.

• <сcрипт> — ЖаваСcрипт/ТйпеСcрипт мантиқи.

• <стйле> — CСС стиллари (сcопед атрибути билан фақат шу компонентга тегишли қилиниши мумкин).

Виртуал ДОМ

Вуэ ҳам Реаcт каби Виртуал ДОМ технологиясидан фойдаланади. Лекин Вуэ 3 да компилятор оптималлаштиришлари қо'шилган — статик элементлар ажратилади ва фақат динамик қисмлар қайта текширилади, бу эса ишлаш тезлигини оширади.

Экотизим

Вуэ атрофида расмий ва ҳамжамият томонидан яратилган кенг экотизим мавжуд:

Расмий кутубхоналар

• Вуэ Роутер — саҳифалар орасида навигация учун расмий роутер.

• Пиниа — Вуэ 3 учун расмий ҳолат бошқаруви кутубхонаси. Вуэх о'рнини эгаллаган.

• Вите — Вуэ жамоаси томонидан яратилган тезкор лойиҳа қуриш ва ишлаб чиқиш воситаси.

• Витест — Вите асосидаги замонавий тест фреймворки.

• ВуэУсе — 200+ дан ортиқ тайёр Cомпоситион АПИ ёрдамчи функсиялари.

Фреймворклар

• Нухт — Вуэ асосидаги то'лиқ стек фреймворк. Сервер томонида рендерлаш (ССР), статик генерация (ССГ) ва АПИ маршрутларини қо'ллаб-қувватлайди.

• Қуасар Фрамеwорк — битта код базасидан веб, мобил ва иш столи иловалари яратиш.

• ВитеПресс — статик сайтлар ва техник ҳужжатлар учун генератор.

УИ кутубхоналар

• Вуэтифй — Материал Десигнга асосланган компонентлар кутубхонаси.

• Элемент Плус — корхона даражасидаги Вуэ 3 УИ кутубхонаси.

• ПримеВуэ — 90+ дан ортиқ компонентли бой УИ то'плами.

• Наиве УИ — ТйпеСcрипт билан ёзилган замонавий УИ кутубхонаси.

Вуэ ва бошқа фреймворклар

Хусусият	Вуэ	Реаcт	Ангулар
Тури	Прогрессив фреймворк	Кутубхона	То'лиқ фреймворк
Тил	ЖаваСcрипт / ТйпеСcрипт	ЖаваСcрипт / ТйпеСcрипт	ТйпеСcрипт (мажбурий)
ДОМ	Виртуал ДОМ	Виртуал ДОМ	Инcрементал ДОМ
Ма'лумот оқими	Икки томонлама (в-модел)	Бир томонлама	Икки томонлама
О'лчам (гзип)	~33 КБ	~42 КБ	~143 КБ
О'рганиш қийинлиги	Осон	О'рта	Қийин
Яратувчи	Эван Ёу	Мета	Гоогле

Вуэ ишлатадиган компаниялар

Вуэ.жс дунёдаги ко'плаб йирик компаниялар томонидан ишлатилади:

• Алибаба — электрон тижорат платформаси

• Хиаоми — технологик компания

• ГитЛаб — дастур кодини бошқариш платформаси

• Нинтендо — о'йин компаниясининг веб хизматлари

• БМW — автомобил компаниясининг веб тизимлари

• Адобе — Портфолио ва бошқа веб хизматлари

• Граммарлй — матнни текшириш хизмати

• Баиду — Хитойнинг энг йирик қидирув тизими

• Ларавел — ПҲП фреймворки Вуэ.жс ни расмий фронтенд сифатида тавсия қилади

Ташқи ҳаволалар

• Расмий веб-сайт

• ГитҲуб репозиторияси

• Вуэ.жс о'рганиш қо'лланмаси

• Нухт — Вуэ асосидаги фреймворк