10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

Перед вами вольный перевод статьи 10 Tips & Tricks to make you a better VueJS Developer с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.

Введение

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

Сделаем красивым синтаксис слотов

С выходом в релиз Vue 2.6 стали доступны сокращения для слотов, что может быть использовано как эвенты (например сокращение @click для v-on:click) или двоеточие для биндинга данных (:src). Если у вас есть например табличный компонент, то вы можете использовать следующую фичу:

<template>
  ...
  <my-table>
    <template #row="{ item }">
      /* some content here. You can freely use 'item' here */
    </template>
  </my-table>
  ...
</template>

$on(‘hook:’)

Это крутая фича, которую вы можете использовать, если вам необходимо определить кастомный слушатель событий или сторонний плагин в хуках created или mounted и необходимо удалить его в хуке beforeDestroy, чтобы не допустить утечек памяти. Используя $on(‘hook:’) вы можете определить или удалить эвент всего в одном хуке.

mounted() {
 const aThirdPartyPlugin = aThirdPartyPlugin()
 this.$on('hook:beforeDestroy', () => {
  aThirdPartyPlugin.destroy()
 })
}

Валидация props

Возможно вы уже знаете, что есть возможность валидация ваших пропсов примитивными значениями, напрмиер String, Number или Object. Но вы так же можете создать кастомный валидатор, например для проверки массива строк:

alertType: {
 validator: value => ['signup', 'login', 'logout'].includes(value)
}

Динамические аргументы директив

Одной из самых классный фич VueJS 2.6 является возможность динамического определения аргументов директив компонентов. Представим, что у вас есть компонент кнопка и вы хотите слушать событие Click при определенных условиях, а событие DoubleClick во всех остальных случаях. Вот случай, где такая директива может пригодиться:

<template>
  ...
  <aButton @[someEvent]="handleSomeEvent()"/>
  ...
</template>

<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dblclick"
    }
  },

  methods:{
    handleSomeEvent(){
      // handle some event
    }
  }
  ...
</script>

И что действительно здорово --> это то что вы можете применять этот шаблон к динамическим HTML атрибутам, пропсам и многому другому!

Переиспользование компонентов для схожих маршрутов

Иногда у вас есть разные маршруты, которые используют некоторый набор компонентов. Если вы переключаетесь между такими маршрутами, то по умолчанию общий компонент не будет перерисован, потому что Vue переиспользует этот компонент для лучшей производительности. Но если вы хотите перерисовывать эти компоненты, то можете определить свойство :key в Router-View-Component:

<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

Пробрасывание всех пропсов из компонента родителя к дочернему

Это действительно крутая фича для пробрасывания вниз всех пропсов из родительского компонента к дочернему. Такой способо удобен, если вы например используете компонент обертку. Таким образом вметсто последовательной передачи всех свойств, вам достаточно прередать их все одновременно:

<template>
  <childComponent v-bind="$props"/>
</template>

Вместо этого:

<template>
  <childComponent  :prop1="prop1"
                   :prop2="prop2"
                   :prop3="prop3"
                   :prop4="prop4"
                   ...
  />
</template>

Пробрасывание всех слушателей событий из компонента родителя к дочернему

Если у вас есть дочерний компонент, который не является рутовым для компонента родителя, вы можете пробросить вниз все слушатели событий от родителя к потомку вот так:

<template>
  <div>
    ...
    <childComponent v-on="$listeners"/>
    ...
  </div>
</template>

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

$createElement

Каждый экземпляр Vue по умолчанию имеет доступ к методу $createElement, который создает и возвращает виртуальные узлы. Это может быть использовано например для использования разметки в методах, которые могут быть переданы в директиву v-html. В функциональных компонентах этот метод доступен, как первый аргумент функции render.

Использование JSX

Начиная с Vue CLI 3 по умполчанию появилась поддержка JSX. Теперь вы можете писать свой код с использование JSX (например если вам так привычнее после реакта), так же это может быть удобнее например для написания функциональных компонентов. Если вы еще не используете Vue CLI 3, то вы можете использовать babel-plugin-transform-vue-jsx для поддержки JSX в вашем проекте.

Кастомный v-model

По умолчанию v-model это то, что мы называем синтаксическим сахаром над событиями @input и :value. Но вы можете указать свойство model в вашем Vue компоненте и определить, какой эвент и пропс будет использован:

export default: {
 model: {
  event: 'change',
  prop: 'checked'
 }
}

Заключение

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