Перевод: сумасшедший технический ботаник
Копирование без разрешения строго запрещено
1. Какова роль и важность атрибута «ключ» при отображении списка элементов?
При рендеринге списка элементовkeyСвойства позволяют Vue отслеживать каждый Vnode. Значение ключа должно быть уникальным.
Если ключевой атрибут не используется, а содержимое списка изменяется (например, при сортировке списка), виртуальный DOM предпочтет исправить узел с обновленными данными, чтобы отразить изменение, а не перемещать элемент вверх и вниз. Это режим по умолчанию, и он работает очень хорошо.
Когда предоставляется уникальное значение ключа IS, элементы переупорядочиваются на основе изменений ключа (и они не исправляются новыми данными), а если ключ удаляется (например, при удалении элемента в списке), соответствующие узлы Element также уничтожаются или удаляются.
Обратите внимание на изображение ниже:
Вот родительский компонент, отображающий список дочерних компонентов. Мы видим, что три элемента списка отображаются как три дочерних узла компонента. Все эти подкомпоненты содержат тег span и поле ввода, а также, возможно, локальный объект состояния (необязательно). Теперь давайте проверим два случая:
Когда ключевое свойство не используется: например, если список был переупорядочен, Vue просто заплатит три узла, которые уже есть, с переупорядоченными данными, не перемещая эти узлы. Этот метод работает нормально, пока пользователь не ввел или не изменил локальное состояние одного или нескольких из этих подкомпонентов. Итак, предположим, что пользователь вводит поле ввода с компонентом номер 3. После переупорядочивания списка содержимое тега span с компонентом номер 3 изменится, но поле ввода останется здесь вместе с введенным пользователем содержимым данных о состоянии нарушения. Это связано с тем, что Vue не распознает компонент номер 3, он просто повторно исправляет обновленные данные, которые он видит, содержимое тега span.
Когда key prop используется в дочернем компоненте, Vue будет знать идентификатор этого компонента, и когда список будет переупорядочен, узел будет перемещен, а не исправлен. Это гарантирует, что отредактированные вручную поля ввода и целые компоненты будут перемещены в новые места.
При условном рендеринге компонента или элемента свойство key также можно использовать, чтобы сигнализировать Vue об уникальности элемента и гарантировать, что элемент не будет повторно исправлен новыми данными.
2. Как бы вы отображали необработанный HTML-код в шаблоне?
Типичным способом вывода содержимого в шаблоне является использование синтаксических тегов усов для вывода данных из методов, свойств или переменных данных. Но тег усов отображает текст. Если вы попытаетесь отобразить HTML с помощью тега усов, он будет отображаться как текстовая строка и не будет анализироваться. Чтобы отобразить и преобразовать содержимое в html, мы можем использовать директиву v-html, как показано ниже.
шаблон
<div id="app" v-html=”title”></div>
App применение
new Vue({
el: '#app',
data: {
title: '<h1 style="color: green;">Vue.js</h1>'
}
});
вывод
Vue.js
Как показано в приведенном выше примере, директива v-html анализирует весь HTML-код, и в результате приведенный выше оператор будет отображаться по запросу. Разработчики должны использовать его с пониманием v-html. Неправильное использование v-html может подвергнуть веб-сайт инъекционным атакам, что может привести к внедрению и выполнению вредоносного кода из внешних источников.
3. Что такое vue-loader?
Vue-loader — это модуль загрузчика для Webpack, который позволяет нам писать однофайловые компоненты в формате файла .vue. Файл компонента, состоящий из одного файла, состоит из трех частей: шаблонов, сценариев и стилей. Модуль vue-loader позволяет веб-пакету извлекать и обрабатывать каждую часть с помощью отдельного модуля загрузчика, такого как загрузчик SASS или SCSS. Эта настройка позволяет нам беспрепятственно писать программы с использованием файлов .vue.
Модуль vue-loader также позволяет рассматривать статические ресурсы как зависимости модуля и обрабатывать их с помощью загрузчика webpack. Это также позволяет выполнять горячую перезагрузку во время разработки.
4. Что такое миксин?
Миксины позволяют нам писать подключаемые и повторно используемые функции для компонентов Vue. Если вы хотите повторно использовать набор параметров компонента, таких как хуки жизненного цикла, методы и т. д., в нескольких компонентах, вы можете написать его как миксин и просто сослаться на него в компоненте. Затем добавьте содержимое миксина в компонент. Если вы определяете хук жизненного цикла в миксине, при выполнении он будет иметь приоритет над собственным хуком компонента.
5. Во время разработки, если ваша программа Vue и внутренний сервер API не работают на одном хосте, как проксировать запросы API. Предполагая настройку с помощью Vue-CLI 3?
Допустим, у нас есть внутренний сервер Node.js, работающий на локальном хосте: 4040. Чтобы убедиться, что он проксирован и доступен из компонентов, мы можем настроить файл vue.config.js и включить раздел devServer, как показано ниже:
Предположим, у нас есть внутренний сервер Node.js, работающий на локальном хосте: 4040. Чтобы обеспечить доступ к прокси-серверу из компонента, файл vue.config.js можно настроить и включить раздел devServer следующим образом:
В файле vue.config.js:
module.exports: {
devServer: {
proxy: {
'/api': {
target: ‘http://localhost:4040/api’,
changeOrigin: true
}
}
}
}
6. Как реквизит определяет требования к типу?
Требования к типу могут быть указаны для отдельных реквизитов путем реализации опции проверки реквизита. Это не повлияет на производство, но выдаст предупреждение во время разработки, помогая разработчикам выявить потенциальные проблемы с конкретными требованиями к типу для входящих данных и свойств.
Пример настройки трех реквизитов:
props: {
accountNumber: {
type: Number,
required: true
},
name: {
type: String,
required: true
},
favoriteColors: Array
}
7. Что такое виртуальный DOM?
Объектная модель документа или DOM определяет интерфейс, который позволяет таким языкам, как JavaScript, получать доступ к HTML-документам и управлять ими. Элементы представлены узлами в дереве, а интерфейсы позволяют нам манипулировать ими. Но этот интерфейс имеет свою цену, очень частые манипуляции с DOM могут замедлить работу страницы.
Vue решает эту проблему, реализуя виртуальное представление структуры документа в памяти, где виртуальные узлы (VNodes) представляют узлы в дереве DOM. Когда требуется манипуляция, вычисления и операции могут выполняться в виртуальной памяти DOM, а не в реальной DOM. Это, естественно, быстрее и позволяет алгоритму виртуального DOM определить наиболее оптимальный способ обновления фактической структуры DOM.
После расчета он применяется к фактическому дереву DOM, что повышает производительность, поэтому так популярны фреймворки на основе виртуального DOM, такие как Vue и React.
8. Что такое плагин Vue?
Плагины Vue позволяют разработчикам создавать и добавлять функциональные возможности на глобальном уровне в Vue. Используется для добавления глобально доступных методов и свойств, ресурсов, параметров, примесей и других пользовательских API в программы. VueFire — это пример плагина Vue, который добавляет специфичные для Firebase методы и привязывает их ко всей программе. После этого функцию firebase можно использовать в любом месте структуры программы.thisиспользуется в контексте.
9. Что такое функция рендеринга? Например.
Vue позволяет нам создавать шаблоны несколькими способами, наиболее распространенным из которых является просто использование HTML со специальными директивами и тегами усов для реактивной функциональности. Но вы также можете создавать шаблоны через JavaScript, используя специальные классы функций (называемые функциями рендеринга). Эти функции очень близки к компилятору, что означает, что они более эффективны и быстрее, чем другие типы шаблонов. Поскольку вы пишете свои функции рендеринга на JavaScript, вы можете использовать этот язык для добавления пользовательских функций непосредственно там, где это необходимо.
Полезно для расширенных сценариев стандартных HTML-шаблонов.
Вот программа Vue, использующая HTML в качестве шаблона
new Vue({
el: '#app',
data: {
fruits: ['Apples', 'Oranges', 'Kiwi']
},
template:
`<div>
<h1>Fruit Basket</h1>
<ol>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ol>
</div>`
});
Вот та же программа, разработанная с функциями рендеринга:
new Vue({
el: '#app',
data: {
fruits: ['Apples', 'Oranges', 'Kiwi']
},
render: function(createElement) {
return createElement('div', [
createElement('h1', 'Fruit Basket'),
createElement('ol', this.fruits.map(function(fruit) {
return createElement('li', fruit);
}))
]);
}
});
вывод:
Fruit Basket
- Apples
- Oranges
- Kiwi
В приведенном выше примере мы использовали функцию, которая возвращает сериюcreateElement()вызовы, каждый из которых отвечает за создание элемента. Хотя директива v-for работает в шаблонах на основе HTML, при использовании функций рендеринга вы можете просто использовать стандартную.map()Функция выполняет итерацию по массиву данных Fruits.
10. Какой хук жизненного цикла лучше всего подходит для извлечения данных из вызовов API?
Хотя это зависит от цели и назначения компонента, создание ловушки жизненного цикла обычно является хорошим местом для выполнения вызовов API. На данный момент доступны данные компонента и адаптивные функции, но компонент еще не отрендерен.
11. Когда вызывается «обновленный» хук жизненного цикла?
Обновленный хук будет вызываться после обновления ответных данных и повторного рендеринга виртуального DOM. Его можно использовать для выполнения операций, связанных с DOM, но (по умолчанию) не гарантирует, что дочерние компоненты будут отображаться, хотя его также можно использовать в функциях обновления с помощьюthis.$nextTickдля обеспечения.
12. Почему бы не использовать стрелочные функции при написании хуков жизненного цикла или других параметров/свойств в экземпляре Vue?
Сама стрелочная функция не определенаthisконтекст, но привязан к контексту своей родительской функции. Когда вы используете стрелочные функции в программе Vue (=>)Время,thisБолезнь ключевого слова не привязана к экземпляру Vue, поэтому возникает ошибка. Поэтому настоятельно рекомендуется вместо этого использовать стандартные объявления функций.
13. Когда использовать элемент keep-alive?
При динамическом переключении компонентов из-за свойств данных или какого-либо другого состояния отклика они повторно визуализируются каждый раз, когда они переключаются в состояние визуализации. Хотя вам может понадобиться такое поведение, в некоторых случаях повторный рендеринг может быть неуместным. Например, компонент, который извлекает данные из вызова API во время создания. Вы, вероятно, не хотите вызывать этот API каждый раз, когда компонент динамически переключается для рендеринга. На этом этапе вы можете обернуть компонент в элемент поддержки активности. Элемент keep-alive кэширует компонент и получает его оттуда вместо того, чтобы каждый раз перерисовывать его.
14. Каков рекомендуемый способ управления состоянием в большой программе Vue? Зачем?
Управление состоянием становится затруднительным, когда программы расширяются в функциональности и коде, и использование бесконечных сетевых реквизитов и восходящих событий, безусловно, не является мудрым решением. В этом случае необходимо передать государственное управление в центральную систему управления. Vuex доступен в экосистеме Vue и является официальной библиотекой управления состоянием и рекомендуемым шаблоном для централизованного хранения состояния.
Vuex позволяет поддерживать центральное состояние. Компоненты используют Vuex в качестве реактивного хранилища данных и обновляются при обновлении состояния. Несколько или несвязанные компоненты могут зависеть от одного и того же центрального хранилища.
В этом случае Vue действует как чистый слой просмотра. Чтобы изменить состояние, слои просмотра (например, кнопки или интерактивные компоненты) должны испускать Vuex.Action, а затем выполните нужную задачу. Для обновления или изменения состояния Vuex предоставляетMutations.
Цель этого рабочего процесса — оставить пригодные для использования следы операций.
15. Что такое асинхронный компонент?
Когда большая программа использует большое количество компонентов, может не иметь смысла загружать все компоненты с сервера одновременно. В этом случае Vue позволяет нам определять компоненты, которые асинхронно загружаются с сервера при необходимости. Vue принимает фабричные функции, которые предоставляют промисы при объявлении или регистрации компонентов. Затем его можно «разобрать» при вызове компонента.
Загружая только необходимые компоненты и откладывая загрузку асинхронных компонентов до будущих вызовов, вы можете сэкономить полосу пропускания и время загрузки программы.
Вот простой пример асинхронного компонента.
new Vue({
components: {
‘tweet-box’: () => import(‘./components/async/TweetBox’)
}
});
При таком использовании для обеспечения этой функциональности будет использоваться разделение кода Webpack.