Автор оригинала: 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 */{{ user.name }}/* 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 */{{ 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, который использует его, переопределит предыдущий.
Чтобы сделать это простым, не повторно используйте код компонента JavaScript в нескольких компонентах SFC. Отдельная функция кода – это удобный синтаксис, а не рисунок дизайна.
Спасибо за чтение, надеюсь, мой опыт был полезен, чтобы вы избегали ошибок, которые я сделал.
Если это было полезно, пожалуйста, нажмите на ? Кнопка несколько раз, чтобы другие нашли статью и показать вашу поддержку! ?
Не забудьте следовать за мной, чтобы получить уведомление о моих предстоящих статьях ?
Проверьте мои другие статьи
➥ JavaScript
- Как улучшить свои навыки JavaScript, написав собственную структуру веб-разработки?
- Остановите болезненный JavaScript Debug и обнимаются Intellij с исходной картой
➥ Реагировать на серию начинающих
- Начать с первой статьи
- Получите лучшие практики