12 лучших практик использования Vue

JavaScript Vue.js

Автор: Мэтт Марибойок. Переводчик: Front-end Xiaozhi Источник: среда

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

1. Всегда будьv-forиспользуется в:key

Когда требуется обработка данных,keyатрибут сv-forИнструкции используются вместе, чтобы программа оставалась постоянной и предсказуемой.

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

если нетkey, Vue просто попытается сделать DOM максимально эффективным. это может означатьv-forЭлементы могут отображаться не по порядку, или их поведение может быть непредсказуемым. Если у нас есть уникальная ключевая ссылка на каждый элемент, мы можем лучше прогнозироватьVueкак именно приложение будет обрабатыватьDOMработать.

<!-- 不好的做法-->
<div v-for='product in products'>  </div>

<!-- 好的做法 -->
<div v-for='product in products' :key='product.id'>

Используйте имена тире в событиях

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

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

this.$emit('close-window')
// 在父组件中
<popup-window @close-window='handleEvent()' />

3. Используйте верблюжий регистр для объявления реквизита и используйте имена тире в шаблонах для доступа к реквизиту.

Лучше всего просто следовать соглашениям каждого языка. В JS объявления в стиле camelCase являются нормой, в HTML — имена с дефисом. Поэтому мы используем их соответствующим образом.

К счастью, Vue уже обеспечивает преобразование между именами camelCase и тире, поэтому нам не нужно беспокоиться ни о чем, кроме фактического их объявления.

// 不好的做法
<PopupWindow titleText='hello world' /> 
props: { 'title-text': String }

// 好的做法
<PopupWindow title-text='hello world' /> 
props: { titleText: String }

4.data всегда должна возвращать функцию

объявление компонентовdataчас,dataОпции всегда должны возвращать функцию. Если возвращаемый объект является объектом, тоdataБудет общим для всех экземпляров компонента.

// 不好的做法
data: {
  name: 'My Window',
  articles: []
}

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

// 好的做法
data () {
  return {
    name: 'My Window',
    articles: []
  }
}

5. Не используйте оба на одном элементеv-ifа такжеv-forинструкция

Чтобы отфильтровать элементы в массиве, мы можем легкоv-ifа такжеv-forИспользуются вместе на одном элементе.

// 不好的做法
<div v-for='product in products' v-if='product.price < 500'>

Проблема в том, что в приоритетном использовании Vuev-forинструкция вместоv-ifинструкция. Он перебирает каждый элемент, затем проверяетv-ifусловие.

this.products.map(function (product) {
  if (product.price < 500) {
    return product
  }
})

Это означает, что даже если мы хотим отобразить только несколько элементов списка, мы должны перебрать весь массив.

Конечно, это не идет нам на пользу.

Более разумное решение — выполнить итерацию по вычисляемому свойству, преобразовав приведенный выше пример во что-то вроде этого:

<div v-for='product in cheapProducts'>
 
computed: {
  cheapProducts: () => {
    return this.products.filter(function (product) {
      return product.price < 100
    })
  }
}

Это имеет несколько преимуществ:

  • Рендеринг более эффективен, потому что мы не перебираем все элементы.

  • Отфильтрованный список повторно используется только при изменении зависимостей

  • Такое написание помогает отделить логику компонента от шаблона, делая компонент более читабельным.

6. Подтвердите наши реквизиты правильными определениями.

Может ли это быть важно, почему?

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

Таким образом, мы можем просто написать валидацию реквизита и нам не нужно кропотливо отслеживать компонент, чтобы определить формат реквизита.

Посмотрите этот пример из документации Vue.

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

7. Используйте верблюжий регистр или тире для полного имени компонента.

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

# 不好的做法

mycomponent.vue
myComponent.vue
Mycomponent.vue

# 好做法

MyComponent.vue

8. Базовые компоненты должны иметь соответствующий префикс

Согласно руководству по стилю Vue, базовый компонент — это тот, который содержит только:

  • HTML-элемент
  • Дополнительные базовые компоненты
  • сторонние компоненты пользовательского интерфейса

Наилучшей практикой для именования этих компонентов является присвоение им префиксаBase,VилиApp. Опять же, любой из них может быть использован, если мы последовательны на протяжении всего проекта.

BaseButton.vue
BaseIcon.vue
BaseHeading.vue

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

Компоненты с одним экземпляром должны называться с префиксомThe

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

Может быть только один активный экземпляр этого компонента.

TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue

10. Следите за последовательностью сокращений инструкций

Обычный метод среди разработчиков Vue — использование сокращений для директив. Например:

  • @даv-onсокращение для
  • :даv-bindсокращение для
  • #даv-slotсокращение для

Хорошо использовать эти сокращения в ваших проектах Vue. Но создание некоего соглашения по всему проекту, всегда использовать их или никогда не использовать, сделает наш проект более связным и читабельным.

11. Не вызывайте методы в «созданном» и «наблюдаемом»

Распространенная ошибка разработчиков Vue заключается в том, что они излишнеcreatedа такжеwatchвызывается метод. Идея заключается в том, что мы хотим запускаться, как только компонент инициализируется.watch.

// плохая практика созданный: () { это.handleChange () }, методы: { обработать изменение () { // всякое случается } }, смотреть () { имущество () { это.handleChange () } }

Однако у Vue для этого есть встроенное решение, о котором мы часто забываем.watchАтрибуты.

Все, что нам нужно сделать, это немного изменить структуруwatchи объявить два свойства:

1.handler (newVal, oldVal)-Это и есть наш метод часов. 2.immediate: true- Представляет, что если он объявлен в wacth, он немедленно выполнит внутреннюю частьhandlerметод, еслиfalseКак и наш предыдущий эффект, он не будет выполнен при связывании

// 好的做法
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property {
    immediate: true
    handler() {
      this.handleChange()
    }
  }
}

12. Выражения шаблона должны быть только базовыми выражениями JS.

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

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

//不好的做法
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

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

Еще одним преимуществом разделения сложных выражений является возможность повторного использования значений.

// 好的做法
{{ 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(' ')
  }
}

Суммировать

Вот 12 наиболее распространенных рекомендаций, которые сделают наш код Vue более удобным для сопровождения, читабельным и профессиональным. Надеюсь, эти советы вам пригодятся (поскольку я всегда хочу помнить о них).

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:medium.com/better-pro Страна…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории