Поширені помилки, яких слід уникати під час роботи з Vue.js

Шукаючи фронтенд-фреймворк для випробування, я почав з React, а потім спробував Vue.js.

На жаль , я зіткнувся з багатьма проблемами з Vue.js на самому початку. У цій статті я хотів би поділитися декількома типовими проблемами, з якими вам доведеться стикатися під час роботи з Vue.js. Деякі з цих питань можуть здатися очевидними, але я вважав, що обмін досвідом може комусь допомогти.

Включіть компілятор шаблонів

Моє перше видання було досить базовим. Перше, що потрібно зробити для використання Vue.js - це імпортувати його. Якщо ви будете слідувати офіційному посібнику та використовувати вбудований шаблон для свого компонента, ви отримаєте порожню сторінку.

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

Зверніть увагу, що ця проблема не виникає, коли ви визначаєте шаблони за допомогою функції візуалізації або SFC (однофайловий компонент).

Насправді існує багато збірок Vue. Збіркою за замовчуванням, експортованою за допомогою пакета NPM, є збірка, лише для виконання . Це не приносить компілятор шаблонів.

Для деякої довідкової інформації компілятор шаблонів працює точно так само, як JSX для React. Він замінює рядки шаблонів на виклики функцій, щоб створити віртуальний вузол DOM.

// #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'); } });

З SFC ця проблема не виникає. Обидва вю-навантажувач і vueify інструменти використовуються для обробки ПФС. Вони генерують прості компоненти JavaScript за допомогою функції візуалізації для визначення шаблону.

Щоб використовувати шаблони рядків у компонентах, використовуйте повну збірку Vue.js.

Таким чином, щоб вирішити цю проблему, вкажіть правильну збірку під час імпорту або створіть псевдонім для Vue у конфігурації пакета.

Зауважте, що використання рядкових шаблонів знижує продуктивність вашої програми, оскільки компіляція відбувається під час виконання.

Існує набагато більше способів визначити шаблон компонента, тому перегляньте цю статтю. Крім того, я рекомендую використовувати функцію візуалізації в екземплярі Vue.

Зберігайте реактивність властивості

Якщо ви використовуєте React, ви, мабуть, знаєте, що його реактивність покладається на виклик setStateфункції для оновлення значення властивостей.

Реактивність з Vue.js трохи інша. Він заснований на проксінгу властивостей компонента. Функції Getter та Setter будуть замінені та повідомлятимуть про оновлення Virtual DOM.

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++; } } });

У наведеному вище фрагменті коду екземпляр Vue має властивість, що називається item(визначена в даних). Ця властивість містить порожній літеральний об'єкт.

Під час ініціалізації компонента Vue створює проксі-сервер під функціями 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.js.

Будьте обережні з експортом SFC

Ви можете регулярно використовувати Vue у файлах JavaScript, але ви також можете використовувати окремі файлові компоненти. Це допомагає зібрати код JavaScript, HTML та CSS в одному файлі.

У SFC кодом компонента є тег сценарію .vueфайлу. Все ще написаний на JavaScript, він повинен експортувати компонент.

Є багато способів експортувати змінну / компонент. Часто ми використовуємо прямий, іменований або стандартний експорт. Названий експорт не дозволить користувачам перейменовувати компонент. Він також матиме право на струшування дерев.

/* 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)

Використання названого експорту не сумісне з SFC, пам’ятайте про це!

Підводячи підсумок, експорт зазначеної змінної за замовчуванням може бути гарною ідеєю. Таким чином, ви отримаєте більш явні повідомлення про налагодження.

Не змішуйте компоненти SFC

Поєднання коду, шаблону та стилю - це гарна ідея. Крім того, залежно від ваших обмежень та думок, ви можете захотіти дотримуватися розділених питань.

Як описано в документації Vue, він сумісний з SFC.

Згодом мені прийшла в голову одна ідея. Використовуйте один і той же код JavaScript і включайте його в різні шаблони. Ви можете вказати на це як на погану практику, але це робить речі простими.

Наприклад, компонент може мати як режим читання, так і режим читання-запису і зберігати однакову реалізацію.

/* 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 */  

У цьому фрагменті шаблони лише для читання та читання-запису використовують один і той же користувацький компонент JavaScript.

Після імпорту обох компонентів ви зрозумієте, що він працює не так, як очікувалося.

// 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можна використовувати лише в одному SFC. В іншому випадку останній імпортований SFC, який його використовує, замінить попередній.

SFC дозволяють розділити код на окремі файли. Але ви не можете імпортувати файли thoses у декількох компонентах Vue.

Щоб спростити це, не використовуйте повторно код компонента JavaScript у декількох компонентах SFC. Окремою функцією коду є зручний синтаксис, а не шаблон дизайну.

Дякую за читання, сподіваюся, мій досвід був корисний, щоб ви уникали помилок, які я зробив.

Якщо це було корисно, натисніть на ? кілька разів натисніть кнопку, щоб інші знайшли статтю та показали свою підтримку! ?

Не забудьте піти за мною, щоб отримувати повідомлення про мої майбутні статті ?

Перегляньте інші мої статті

➥ JavaScript

  • How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework ?
  • Stop Painful JavaScript Debug and Embrace Intellij with Source Map

➥ React for beginners series

  • Begin with the first article
  • Get the best practices guide