Перед вами вольный перевод статьи "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 разработчиком.