Уобичајене грешке које треба избегавати током рада са Вуе.јс-ом

У потрази за фронт-енд фрамеворк-ом за испробавање, започео сам са Реацт-ом, а затим испробао Вуе.јс.

Нажалост , на самом почетку сам наишао на пуно проблема са Вуе.јс-ом. У овом чланку бих желео да поделим неколико уобичајених проблема са којима ћете можда морати да се суочите када радите са Вуе.јс. Нека од ових питања могу изгледати очигледно, али сматрао сам да би размена мог искуства некоме могла помоћи.

Укључите компајлер шаблона

Моје прво издање је било прилично основно. Прво што треба да урадите да бисте користили Вуе.јс је да га увезете. Ако следите званични водич и користите уграђени образац за своју компоненту, добићете празну страницу.

import Vue from 'vue'; var vm = new Vue({ el: '#vm', template: ' Hello World ', });

Имајте на уму да се овај проблем не јавља када дефинишете предлошке помоћу функције приказа или СФЦ (компонента једне датотеке).

Заправо, постоји много Вуе верзија. Подразумевана градња коју извози НПМ пакет је радна верзија . Не доноси компајлер шаблона.

За неке позадинске информације, компајлер шаблона ради тачно као ЈСКС за Реацт. Замењује низове предложака позивима функција да би креирао виртуелни ДОМ чвор.

// #1: import full build in JavaScript file import Vue from 'vue/dist/vue.js'; // OR #2: make an alias in webpack configuration config.resolve: { alias: { vue: 'vue/dist/vue.js' } } // OR #3: use render function directly var vm = new Vue({ el: '#vm', render: function(createElement) { return createElement('div', 'Hello world'); } });

Код СФЦ-ова се овај проблем не јавља. И вуе-лоадер и вуеифи су алати који се користе за руковање СФЦ-овима. Они генеришу обичне ЈаваСцрипт компоненте користећи функцију приказивања да дефинишу предложак.

Да бисте користили предлошке низова у компонентама, користите потпуну Вуе.јс верзију.

Укратко, да бисте решили овај проблем, наведите тачну изградњу током увоза или направите псеудоним за Вуе у својој конфигурацији пакета.

Имајте на уму да употреба предложака низова смањује перформансе ваше апликације, јер се компилација дешава у току извршавања.

Постоји још много начина за дефинисање шаблона компоненте, зато погледајте овај чланак. Такође, препоручујем употребу функције приказа у инстанци Вуе.

Задржите реактивност имовине

Ако користите Реацт, вероватно знате да се његова реактивност ослања на позивање setStateфункције ради ажурирања вредности својстава.

Реактивност са Вуе.јс је мало другачија. Заснован је на проксирању својстава компоненте. Функције гетера и постављача биће замењене и обавештаваће о ажурирањима виртуелног ДОМ-а.

var vm = new Vue({ el: '#vm', template: ` {{ item.count }} `, data: { item: {} }, beforeMount () { this.$data.item.count = 0; }, methods: { updateCount () { // JavaScript object is updated but // the component template is not rendered again this.$data.item.count++; } } });

У исечку кода горе, инстанца Вуе има својство под називом item(дефинисано у подацима). Ово својство садржи празан литерални објекат.

Током иницијализације компоненте, Вуе креира проки испод getи setфункције повезане са itemсвојством. Дакле, оквир ће посматрати промене вредности и на крају реаговати.

Међутим, countсвојство није реактивно јер није декларисано у време иницијализације.

Заправо, проксификовање се догађа само у време иницијализације компоненте, а beforeMountфункција животног циклуса се активира касније.

Поред тога, itemпостављач се не позива током countдефиниције. Дакле, прокси се неће активирати и countсвојство неће имати сат.

beforeMount () { // #1: Call parent setter // item setter is called so proxifying is propaged this.$data.item = { count: 0 }; // OR #2: explicitly ask for watching // item.count got its getter and setter proxyfied this.$set(this.$data.item, 'count', 0); // "Short-hand" for: Vue.set(this.$data.item, 'count', 0); }

Ако задржите item.countафекцију beforeMount, позивање Vue.setкасније неће створити сат.

Потпуно исти проблем јавља се и са низовима када се користи директна наклоност непознатим индексима. У таквим случајевима би требало да преферирате низ проксификованих функција као што су pushи slice.

Такође, овај чланак можете прочитати на веб локацији програмера Вуе.јс.

Будите опрезни са СФЦ извозом

Вуе можете редовно користити у ЈаваСцрипт датотекама, али можете користити и компоненте једне датотеке. Помаже у прикупљању ЈаваСцрипт, ХТМЛ и ЦСС кода у једној датотеци.

Код СФЦ-а, код компоненте је ознака скрипте .vueдатотеке. И даље написан на ЈаваСцрипт-у, компоненту мора да извезе.

Постоји много начина за извоз променљиве / компоненте. Често користимо директни, именовани или подразумевани извоз. Именовани извоз спречиће кориснике да преименују компоненту. Такође ће бити прихватљиво за дрмање дрвећа.

/* File: user.vue */ {{ user.name }} const User = { data: () => ({ user: { name: 'John Doe' } }) }; export User; // Not work export default User; // Works  /* File: app.js */ import {User} from 'user.vue'; // Not work import User from 'user.vue'; // Works (".vue" is required)

Коришћење именованог извоза није компатибилно са СФЦ-има, имајте на уму ово!

Укратко, извоз поменуте променљиве по дефаулту може бити добра идеја. На овај начин ћете добити експлицитније поруке за отклањање грешака.

Не мешајте СФЦ компоненте

Састављање кода, шаблона и стила је добра идеја. Поред тога, у зависности од ваших ограничења и мишљења, можда ћете желети да задржите раздвајање забринутости.

Као што је описано у Вуе документацији, компатибилан је са СФЦ.

После ми је пала на памет једна идеја. Користите исти ЈаваСцрипт код и укључите га у различите предлошке. Можда ћете то истакнути као лошу праксу, али ствари чине једноставним.

На пример, компонента може имати режим само за читање и читање-писање и задржати исту имплементацију.

/* File: user.js */ const User = { data: () => ({ user: { name: 'John Doe' } }) }; export default User; /* File: user-read-only.vue */ {{ user.name }} /* File: user-read-write.vue */  

У овом исечку и предлошци само за читање и за читање и писање користе исту ЈаваСцрипт корисничку компоненту.

Једном када увезете обе компоненте, схватићете да то не ради како се очекивало.

// The last import wins import UserReadWrite from './user-read-write.vue'; import UserReadOnly from './user-read-only.vue'; Vue.component('UserReadOnly', UserReadOnly); Vue.component('UserReadWrite', UserReadWrite); // Renders two times a UserReadOnly var vm = new Vue({ el: '#vm', template: ` ` });

Компонента дефинисана уuser.jsможе се користити само у једном СФЦ. У супротном, последњи увезени СФЦ који га користи замениће претходни.

СФЦ-ови омогућавају раздвајање кода у одвојеним датотекама. Али не можете увести датотеке тхосес у више компоненти Вуе.

Да бисте то учинили једноставним, немојте поново користити код ЈаваСцрипт компоненте у више СФЦ компонената. Посебна карактеристика кода је корисна синтакса, а не образац дизајна.

Хвала на читању, надам се да је моје искуство било корисно како бисте избегли грешке које сам направио.

Ако је било корисно, кликните на ? дугме неколико пута да други нађу чланак и покажу вашу подршку! ?

Не заборавите да ме пратите да бисте били обавештени о мојим предстојећим чланцима ?

Погледајте моје остале чланке

➥ ЈаваСцрипт

  • Како побољшати своје ЈаваСцрипт вештине писањем сопственог оквира за веб развој?
  • Зауставите болно отклањање грешака у ЈаваСцрипт-у и прихватите Интеллиј помоћу изворне мапе

Реагујте за серију за почетнике

  • Почните са првим чланком
  • Набавите водич за најбоље праксе