Пожалуйста, опишите ошибку

Нашли баг? Помогите нам его исправить, заполнив эту форму

Новое в блоге: Анимация Skeleton

Возможности фреймворка Vue.js. Часть 2

Алексей Форманюк
Web-разработчик

В первой статье о Vue.js мы разобрали основы фреймворка, работу с событиями, условными операторами и циклами. Во второй части мы рассмотрим такие понятия, как вычисляемые свойства и компоненты.

Простые выражения в темплейтах полезны для решения несложных задач. Но если нужно выводить данные, в которых необходима более сложная логика, используются вычисляемые свойства (computed properties). Все вычисляемые свойства указываются внутри объекта computed.

<div id="app">
  <div>{{count}}</div>
  <input v-model="text" type="text" />
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    text: ''
  },
  computed: {
    count() {
      const symbolsLen = this.text.length;
      let str = 'символ';
      
      if (!symbolsLen || symbolsLen > 4) str = 'символов';
      if (symbolsLen > 1 && symbolsLen < 5) str = 'символа';
      return symbolsLen + ' ' + str;
    }
  }
});
</script>

Но похожего результата можно было добиться, если count вынести в methods. В чём же тогда преимущество вычисляемых свойств? В том что они кэшируют используемые внутри значения. Это значит, если text.length не изменится, метод count сразу же покажет результат без дополнительных вычислений. Чтобы метод count пересчитал результат, необходимо изменить text.length.

Помимо computed properties, vue предоставляет ещё один способ наблюдения за изменяемыми свойствами: это watcher (наблюдатель). В большинстве решаемых задача в vue будет достаточно и рекомендуется использовать computed properties. Но когда необходимо провести вычисления, применяя асинхронный или высоконагруженный код, есть повод использовать watch.

Чтобы объявить watcher, его необходимо добавить в объект watch, внутри vue инстанса.

<script>
  new Vue({
  el: '#app',
  watch: {
    someWatcher() {},
    ...
  }
});
</script>

Компоненты

Компоненты в vue предоставляют огромные возможности для разработчиков, позволяя расширять базовые HTML-теги. По сути компоненты — это созданные элементы, которые работают согласно определенной логике. Однажды созданный компонент можно многократно использовать в коде.

Пример создания компонента:

<div>
  <new-component></new-component>
</div>

<script>
  Vue.component('new-component', {
    template: '<p>Hello from component</p>'
  });

  new Vue({
    el: '#root'
  });
</script>

Необходимо объявить компонент до объявления корневого инстанса. Затем просто добавляем в html наш созданный компонент. Особых правил по именованию компонентов в Vue нет, но желательно придерживаться стандарта и в названиях компонентов использовать нижний регистр и разделять два и более слова тире.

Результатом кода выше будет:

<div>
  <p>Hello from component</p>
</div>

Также компоненты можно объявлять локально в текущем инстансе или в другом компоненте.

new Vue({
  component: {
    'new-component': {
      template: '<h1>Hello Vue component<h1>'
    }
  }
});

Обычно компоненты представляют собой иерархическую модель, данные от самого верхнего компонента-родителя передаются вниз компонентам-потомкам. Также возможен сценарий, когда поток данных идёт от дочерних компонентов вверх, или данные нужно передать между соседними компонентами. В vue.js есть для этого специальный механизм передачи данных, который следует принципу «входные параметры — вниз, события — вверх». Родитель передаёт имеющиеся у него данные через входные параметры (props), а потомок сообщает об изменениях с помощью событий (events). Пример работы этого механизма представлен на рисунке ниже.

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

Каждый компонент имеет свою изолированную область видимости, и дочерние компоненты не могут обращаться к данным родительского компонента. Чтобы решить проблему передачи данных, используются входные параметры (props).

<my-component data="hello"></my-component>

<script>
  Vue.component('my-component', {
    props: ['data'],
    template: '<p>{{data}}</p>'
  })
<script>

Результатом кода выше будет вывод строки hello.

Для того чтобы передать число в дочерний компонент необходимо использовать директиву v-bind: <my-component v-bind:data="7"></my-component>. В этом случае в props дочернему компоненту придёт число 7.

Чтобы оповестить родительский компонент об изменениях, нужно оповестить его из дочернего компонента с помощью $emit(eventName), а сам родительский компонент подписать на это событие с помощью $on(eventName).

В vue компонентах существует своя система валидации. Если полученные параметры не удовлетворяют требованиям, будет выведено предупреждение в консоль.

Vue поддерживает следующие типы для валидации:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

В двух статьях мы рассмотрели базовые возможности vue.js. Это простой в изучение фреймворк, но не менее эффективный чем конкурирующие React или Angular, позволяющий быстро разрабатывать современные и производительные web-приложения.

Читать и комментировать

Краснодар

Коммунаров, 268,
3 эт, офисы 705, 707

+7 (861) 200 27 34

Хьюстон

3523 Brinton trails Ln Katy

+1 833 933 0204

Москва

+7 (495) 145-01-05