Освоение вычисляемых свойств во VueJS

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

<span>
   {{text.replace(‘ ‘, ‘’).reverse().toUpperCase()}}
</span>

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

Ок, и как они работают?

Теперь, когда мы знаем, чем вычисляемые свойства полезны, давайте рассмотрим, как их использовать. В общем случае, мы просто добавляем computed к нашему экспорту. Для приведенного выше примера это будет выглядеть так.

export default {
   data () {
      text: ‘hello world’
   },
   computed {
      formattedText: function () {
         return this.text.replace(‘ ‘, ‘’).reverse().toUpperCase()
      }
   }
}

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

<span>
   {{ formattedText }}
</span>

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

Итак, когда именно изменяется вычисляемое свойство?

В нашем примере formattedText всегда будет зависеть от значения текста. Так что если мы изменим текст на «ABCDEF», то formattedText вернет «FEDCBA». Однако для более эффективной работы VueJS кэширует вычисленные значения свойств. VueJS будет пересчитывать свойство только при изменении зависимости. В нашем случае он будет пересчитываться только при изменении текста. В противном случае он вернет кэшированное значение из последнего изменения.

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

Если никакая зависимость не изменяется, вычисляемое свойство не пересчитывается.

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

computed: {
   now: function () {
      return new Date()
   }
}

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

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

Вы также можете определить setter для вычисляемого свойства

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

computed: {
   formattedText: function () {
      get: function () {
         return this.text.replace(‘ ‘, ‘’).reverse().toUpperCase()
      },
      set: function (value) {
         this.text = value;
      }
   }
}

Чем computed свойства отличаются от watchers?

Как вычисляемые свойства, так и наблюдатели (watchers) могут обновлять значения на основе данных. Хотя все вычисляемые свойства могут быть записаны с использованием наблюдателей (watchers), часто более читабельно и эффективно использовать вычисляемое свойство. Возьмите следующий пример, сначала написанный через наблюдатель (watchers), а затем как вычисляемое свойство.

export {
   data () {
      return {
         name: ‘Matt’,
         age: 19,
         output: ‘’
      }
   },
   watch: {
      name: function (val) {
         this.output = this.name + ‘ is ‘ + this.age + ‘ years old.’
      },
      age: function (val) {
         this.output = this.name + ‘ is ‘ + this.age + ‘ years old.’
      }
   }
}
// Now as a computed property
export {
   data () {
      return {
         name: ‘Matt’,
         age: 19
      }
   },
   computed: {
      nameAndAge: function () {
         return this.name + ‘ is ‘ + this.age + ‘ years old.’
      }
   }
}

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

Заключение.

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