Распространенные ошибки, которые следует избегать при работе с Vue.js

rasprostranennye oshibki kotorye sleduet izbegat pri rabote s vuejs

Ища интерфейсный фреймворк для испытания, я начал с React, а затем попробовал Vue.js.

К сожалению, Я столкнулся с многими проблемами с Vue.js в самом начале. В этой статье я хотел бы поделиться несколькими типичными проблемами, с которыми, возможно, придется иметь дело во время работы с Vue.js. Некоторые из этих проблем могут показаться очевидными, но я подумал, что кому может помочь поделиться своим опытом.

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

Мой первый выпуск был достаточно прост. Первое, что нужно сделать, чтобы использовать Vue.js, это импортировать его. Если вы придерживаетесь официального руководства и используете встроенный шаблон для компонента, вы получите пустую страницу.

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

Обратите внимание, что эта проблема не возникает, если вы определяете шаблоны с помощью функции рендеринга или SFC (Single File Component).

На самом деле есть много сборников 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 эта проблема не возникает. Оба vue-загрузчик и vueify это инструменты, используемые для обработки SFC. Они генерируют обычные компоненты JavaScript, используя функцию рендеринга для определения шаблона.

Для использования шаблонов строк в компонентах используйте полную сборку Vue.js.

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

Обратите внимание, что использование шаблонов строк снижает производительность программы, поскольку компиляция происходит при выполнении.

Существует много других способов определения шаблона компонента, поэтому просмотрите статью. Кроме того, я рекомендую использовать функцию рендеринга в экземпляре Vue.

Сохраняйте реактивность свойства

Если вы используете React, вы, вероятно, знаете, что его реактивность зависит от вызова setState функция для обновления значения свойств.

Реактивность с Vue.js несколько иная. Он основан на прокси-сервере свойств компонента. Функции Getter и Setter будут заменены и оповещены об обновлении Virtual DOM.

var vm = new Vue({
  el: '#vm',
  template: `<div>{{ item.count }}<input type="button" value="Click" @click="updateCount"/></div>`,
  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 коде компонента является тег сценария a .vue файл. Все еще написан на JavaScript, он должен экспортировать компонент.

Существует много способов экспорта переменной/компонента. Зачастую мы используем прямой, именуемый экспорт или экспорт по умолчанию. Именуемый экспорт не позволит пользователям переименовать компонент. Он также будет иметь право на встряхивание деревьев.

/* File: user.vue */
<template>
  <div>{{ user.name }}</div>
</template>

<script>
  const User = {
    data: () => ({
      user: {
        name: 'John Doe'
      }
    })
  };
  export User; // Not work
  export default User; // Works
</script>

/* 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 */
<template><div>{{ user.name }}</div></template>
<script src="

/* File: user-read-write.vue */
<template><input v-model="user.name"/></template>
<script src="

В этом фрагменте как шаблоны только для чтения, так и шаблоны для чтения и записи используют тот же пользовательский компонент 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: `<div><UserReadOnly/><UserReadWrite/></div>`
});

Компонент, определенный в user.js можно использовать только в одном SFC. В противном случае последний импортируемый SFC, его использующий, заменит предыдущий.

SFC разрешают разделять код на отдельные файлы. Но вы не можете импортировать эти файлы в несколько компонентов Vue.

Чтобы упростить это, не используйте код компонента JavaScript в нескольких компонентах SFC. Функция отдельного кода – это удобный синтаксис, а не шаблон проектирования.

Спасибо за прочтение. Надеюсь, мой опыт был полезен, чтобы избежать ошибок, которые я совершил.

Если это было полезно, нажмите на ? несколько раз, чтобы другие нашли статью и выразили вашу поддержку! ?

Не забудьте подписаться на меня, чтобы получать уведомления о моих будущих статьях ?

➥ JavaScript

➥ Серия React для начинающих

Добавить комментарий

Ваш адрес email не будет опубликован.