1.Всегда используй :key вместе c v-for
Использование ключевого атрибута с директивой v-for помогает приложению быть постоянным и предсказуемым всякий раз, когда вы хотите манипулировать данными.
Это необходимо для того, чтобы Vue мог отслеживать состояние вашего компонента, а также иметь постоянную ссылку на ваши различные элементы. Пример, в котором :key чрезвычайно полезен это анимации или transitions.
Если этот атрибут не указан, Vue использует алгоритм, минимизирующий перемещение элементов и старается обновить и повторно использовать как можно больше элементов правильного типа «на местах».
Если ключ указан, Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей. Элементы, соответствующие ключам, которых больше нет, Vue всегда уничтожает.
<!-- BAD -->
<div v-for='product in products'></div>
<!-- GOOD! -->
<div v-for='product in products' :key='product.id'>
Можно также применить эту директиву, чтобы элемент всегда заменялся на новый, а не переиспользовался. Это может помочь, если вы хотите:
- Быть уверенным, что все хуки жизненного цикла компонента будут вызваны
- Запускать анимации (например, установленные в transition)
Например:
<transition>
<span :key="text">{{ text }}</span>
</transition>
При изменении text, <span> всегда будет заменяться целиком, что спровоцирует вызов анимации.
2. Используй kebab-case для событий
Когда речь заходит о создании пользовательских событий, всегда лучше использовать kebab-case. Это происходит потому, что в Родительском компоненте используется тот же синтаксис, что и для прослушивания этого события.
Поэтому для обеспечения согласованности между нашими компонентами и для того, чтобы сделать ваш код более читаемым, придерживайтесь использования kebab-case в обоих местах.
this.$emit('close-window')
<popup-window @close-window='handleEvent()' />
3. Объявить props с camelCase и использовать kebab-case в шаблонах
Эта наилучшая практика просто следует условностям для каждого языка. В Javascript camelCase является стандартом, а в HTML-это kebab-case, поэтому мы используем их соответственно.
К счастью для нас, VueJS преобразуется между kebab-case и camelCase для нас, так что нам не нужно беспокоиться ни о чем, кроме фактического объявления их.
BAD!
<PopupWindow titleText='hello world' />
props: {
'title-text': String
}
GOOD!
<PopupWindow title-text='hello world' />
props: {
titleText: String
}
4. Data всегда должна возвращать функцию
При определении компонента опция data должна быть функцией, которая возвращает объект данных, потому что может быть создано множество экземпляров.
Если использовать в data простой объект, то все созданные экземпляры получат ссылку на него!
А когда data — функция, при создании нового экземпляра можно вызвать её и получить свежую копию данных для инициализации.
BAD!
data: {name: 'My Window',}
GOOD!
data () {
return {name: 'My Window',}
}
5. Не используй v-if с v-for
При совместном использовании v-if и v-for, директива v-for имеет более высокий приоритет.
BAD!
<div v-for='product in products' v-if='product.price < 500'>
this.products.map(function (product) {
if (product.price < 500) {
return product
}
})
GOOD!
<div v-for='product in cheapProducts'>
computed: {
cheapProducts: () => {
return this.products.filter(function (product) {
return product.price < 100
})
}
}
6. Валидируй свои props
Это спасает вас в будущем. При разработке проекта легко забыть точный формат, тип и другие условности, которые вы использовали для опоры.
И если вы работаете в более крупной команде разработчиков, ваши коллеги не умеют читать мысли, поэтому объясните им, как использовать ваши компоненты!
Так что избавьте всех от хлопот, связанных с тщательным отслеживанием вашего компонента, чтобы определить форматирование props, просто напишите проверки props.
Когда валидация входного параметра заканчивается ошибкой — Vue выдаст предупреждение в консоли (если используется сборка для разработки).
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
7. Используйте PascalCase или kebab-case для компонентов
# BAD
mycomponent.vue
myComponent.vue
Mycomponent.vue
# GOOD
MyComponent.vue
8. Используй короткие директивы
- @ is short for v-on:
- : is short for v-bind
- # is short for v-slot
9. Не вызывай метод в created и watch
Распространенная ошибка разработчиков Vue заключается в том, что они без необходимости вызывают метод в created and watch. Мысль, стоящая за этим, заключается в том, что мы хотим запустить механизм наблюдения, как только компонент инициализирован.
BAD!
created: () {
this.handleChange()
},
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property() {
this.handleChange()
}
}
Однако в Vue есть встроенное решение для этого. И это свойство наблюдателей Vue, о котором мы часто забываем.
Все, что нам нужно сделать, это немного изменить структуру нашего наблюдателя и объявить два свойства:
handler (newVal, oldVal) - это сам наш метод наблюдателя
immediate: true - это заставляет наш обработчик работать при создании экземпляра
GOOD!
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property {
immediate: true
handler() {
this.handleChange()
}
}
}
10. Шаблонные выражения должны содержать только базовые выражения Javascript
Естественно, что вы хотите добавить как можно больше встроенных функций в свои шаблоны. Но это делает наш шаблон менее декларативным и более сложным.
Это означает, что наш шаблон просто становится чрезвычайно захламленным.
Для этого давайте рассмотрим другой пример из руководства по стилю Vue. Посмотри, как все запутано.
BAD!
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
В принципе, мы хотим, чтобы все в нашем шаблоне было интуитивно понятным относительно того, что он отображает. Чтобы сохранить это, мы должны рефакторировать сложные выражения в соответствующие именованные параметры компонентов.
Еще одно преимущество выделения сложных выражений заключается в том, что эти значения можно использовать повторно.
GOOD!
{{ normalizedFullName }}
// The complex expression has been moved to a computed property
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
статья написана на основе перевода https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/