Рубрики
Без рубрики

Общие ошибки, чтобы избежать во время работы с Vue.js

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

Автор оригинала: FreeCodeCamp Community Member.

Ищете переднюю структуру, чтобы попробовать, я начал с реагирования, а затем попробовал Vue.js.

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

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

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

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

Обратите внимание, что эта проблема не возникает при определении шаблонов с функцией рендеринга или SFC ( одно файловый компонент ).

На самом деле, есть много Vue строит Отказ Создание по умолчанию, экспортируемая пакетом NPM, является ТОЛЬКО РАБОТАЕТСЯ СТРОИТЬ Отказ Это не приносит компилятор шаблона.

Для некоторой фоновой информации Compiler шаблонов работает точно так же, как JSX для реагирования Отказ Он заменяет шаблонные строки с функционными вызовами для создания виртуального узла 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');
  }
});

С SFCS эта проблема не происходит. Оба Vue-loader и Vueify инструменты используются для обработки SFC. Они генерируют простые компоненты JavaScript с помощью функции рендеринга для определения шаблона.

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

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

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

Есть много способов определить шаблон компонента, поэтому Проверьте эту статью Отказ Кроме того, я рекомендую использовать Функция визуализации в экземпляре Vue Отказ

Держите реактивность имущества

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

Реактивность с Vue.js немного отличается. Он основан на процветании компонентных свойств. Getter и Setter Функции будут переоценены и будут уведомить обновления на виртуальном доме.

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 имеет свойство под названием Предмет (Определяется в данных). Это свойство содержит пустой буквальный объект.

Во время инициализации компонента Vue создает прокси под получить и Установить Функции прикреплены к Предмет имущество. Таким образом, структура будет наблюдать за изменением значения и в конечном итоге реагировать.

Тем не менее, Считать Недвижимость не реагирует, потому что он не был объявлен по времени инициализации.

На самом деле, просификация происходит только при времени инициализации компонентов, а также Beforemount Функция жизненного цикла триггеры позже.

Кроме того, Предмет Устройство не вызывается во время Считать определение. Таким образом, прокси не запускает и Считать Недвижимость не будет иметь смотреть.

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 Позже не создаст часы.

Точно так же проблема также возникает с массивами при использовании прямой привязанности к неизвестным индексам. В таких случаях вы должны предпочесть Array Proxcyed Функции такие как толчок и ломтик Отказ

Кроме того, вы можете прочитать Эта статья от сайта Developer Vue.js.

Будьте осторожны с экспортом SFC

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

С SFCS код компонента – это тег сценария A .vue файл. Все еще написано в JavaScript, он должен экспортировать компонент.

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

/* File: user.vue */




/* File: app.js */
import {User} from 'user.vue'; // Not work
import User from 'user.vue'; // Works (".vue" is required)

Использование именованного экспорта не совместима с SFCS, не учитываем об этом!

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

Не смешивайте компоненты SFC

Положить код, шаблон и стиль вместе – хорошая идея. Кроме того, в зависимости от ваших ограничений и мнений, вы можете сохранить Разделение опасений Отказ

Как описано в Vue документация , это совместимо с SFC.

После этого одна идея пришла на мой взгляд. Используйте тот же код JavaScript и включите его в разные шаблоны. Вы можете указать ему как плохую практику, но он сохраняет все возможное.

Например, компонент может иметь как только для чтения, так и для чтения режима записи и сохранить ту же реализацию.

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

/* File: user-read-only.vue */



/* 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, который использует его, переопределит предыдущий.

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

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

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

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

Проверьте мои другие статьи

➥ JavaScript

➥ Реагировать на серию начинающих

  • Начать с первой статьи
  • Получите лучшие практики